Сделать элемент над сеткой такой же ширины, как и сетка - PullRequest
Новая
       5

Сделать элемент над сеткой такой же ширины, как и сетка

1 голос
/ 25 марта 2020

Я бы хотел, чтобы поисковый ввод над сеткой был того же размера, что и сетка. Когда вы изначально загружаете это на устройство с достаточно большим разрешением, они выглядят одинаково, но когда вы начинаете уменьшать область просмотра браузера, так что только одна карта помещается в строку, сетка становится меньше, однако вышеупомянутый div, который Содержит поисковый ввод не. Я бы хотел, чтобы div поиска реагировал так, чтобы он изменял размеры для пользователей с меньшим разрешением.

Возможно, есть какой-то способ вставить его в сетку, я просто не знаю, как это сделать. this.

В качестве примера я создал следующий код:

https://codepen.io/latchkostov/pen/vYOVjjo

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #1f1f1f;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  max-width: 920px;
  margin: 20px 20px;
}

.grid {
  display: grid;
  height: 100%;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(450px, 450px));
  grid-gap: 20px;
  grid-template-rows: auto;
}

.search {
  width: 100%;
  margin-bottom: 40px;
  grid-area: auto / auto;
}

.search-input {
  width: 100%;
}

.item {
  width: 100%;
  height: 300px;
  background: #bfbfbf;
}
<div class="content">
  <div class="search">
    <input type="text" placeholder="search" class="search-input" />
  </div>
  <div class="grid">
    <div class="item">Card 1</div>
    <div class="item">Card 2</div>
    <div class="item">Card 3</div>
    <div class="item">Card 4</div>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 25 марта 2020

Я думаю, что вы можете заставить макет работать с несколькими изменениями в вашем коде:

  • Переключение с column на row wrap в гибком контейнере.
  • Установите оба строка поиска и сетка до 100% ширины контейнера.

пересмотренный кодовый блок 

.content {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100vh;
  padding: 20px;
}

.search {
  flex: 0 0 100%;
  min-width: 450px;
  margin-bottom: 40px;
}

.search-input {
  width: 100%;
}

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-auto-rows: 300px;
  grid-gap: 20px;
}

.item {
  background: #bfbfbf;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #1f1f1f;
}
<div class="content">
  <div class="search">
    <input type="text" placeholder="search" class="search-input" />
  </div>
  <div class="grid">
    <div class="item">Card 1</div>
    <div class="item">Card 2</div>
    <div class="item">Card 3</div>
    <div class="item">Card 4</div>
  </div>
</div>
0 голосов
/ 25 марта 2020

Ваш код почти правильный, но мало чего не хватает. Вы используете box-sizing: border-box; с .content свойством класса margin: 20px 20px;, это создаст проблему на небольших устройствах. .content должно быть margin: 0 auto; и padding: 20px 15px;. Вы используете grid-template-columns: repeat(auto-fill, minmax(450px, 450px));. Это не будет работать для небольших устройств, где размер устройства меньше 450px, вы увидите горизонтальную полосу прокрутки. Вы можете использовать @media для перезаписи grid свойства. Ниже я изменяю ваше свойство css и HTML во фрагменте. 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #1f1f1f;
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  flex-direction: column;
  /* height: 100%; */ /* You no need to use height 100% here. It have no effect */
  min-height: 100vh;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 15px;
  width: 100%;
}

.grid {
  display: grid;
  /* height: 100%; */
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
@media (max-width: 767px){
  .grid{
    grid-template-columns: 100%;
  }
}

.search {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 40px;
  /* grid-area: auto / auto; */
}

.search-input {
  height: 40px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 6px 12px;
  width: 100%;
}
@media (max-width: 767px){
  .search-input{
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}

.item {
  width: 100%;
  height: 300px;
  background: #bfbfbf;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
<div class="content">
  <div class="search">
    <input type="text" placeholder="search" class="search-input" />
  </div>
  <div class="grid">
    <div class="grid-item"><div class="item">Card 1</div></div>
    <div class="grid-item"><div class="item">Card 2</div></div>
    <div class="grid-item"><div class="item">Card 3</div></div>
    <div class="grid-item"><div class="item">Card 4</div></div>
  </div>
</div>
0 голосов
/ 25 марта 2020

Вы можете получить размер с вашей карты сетки в виде 'width' и установить размер для вашего указанного выше деления.

здесь следующее javascript. 

<script>
   //Get one card from the grid
   var card1 = document.getElementsByClassName('item')[0];
   //Get width of this card
   var card1Width = card1.offsetWidth;
    //Get your search div
    var searchDiv = document.getElementsByClassName('searchDiv')[0];
    //set the card's width on search div
     searchDiv.style.width = card1Width+"px";   
</script>
...