使网格上方的元素与网格宽度相同

Question

我希望网格上方的搜索输入与网格大小相同。当您最初在分辨率足够大的设备上加载它时，它们看起来是一样的，但是当您开始缩小浏览器视口，以便每行只适合一张卡片时，网格会变小，但是，上面的 div包含搜索输入不包含。我想让搜索 div 具有反应性，以便它可以为分辨率较小的用户调整大小。也许有某种方法可以实际放入网格中，我只是不知道该怎么做。我创建了以下 codepen 作为示例：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>

Answer 1

您的代码几乎是正确的，但缺少一些东西。您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>

Answer 2

我认为您可以通过对代码进行一些修改来使布局正常工作：

• 在弹性容器中从 切换到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>

Answer 3

您可以从网格卡中获取尺寸作为“宽度”，并将尺寸设置为上面的 div。

这里是下面的 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>