Question

我希望网格上方的搜索输入与网格的尺寸相同。最初在分辨率足够大的设备上加载时，它们看起来是一样的，但是当您开始缩小浏览器视口的大小，以便每行只能容纳一张卡时，网格会变小，但是，上面的div包含不包含搜索输入。我想使搜索div具有反应性，以便为分辨率较小的用户调整大小。

也许有某种方法可以实际放入网格中，我只是不知道该怎么做。

我创建了以下代码库作为示例：

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

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

在弹性容器中从column切换到row wrap。
将搜索栏和网格都设置为容器宽度的100％。

revised codepen

.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 2

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

您可以从网格卡上获取尺寸为“宽度”，并将尺寸设置为上方格。

此处为以下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>

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

3 个答案: