Question

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  grid-template-rows: max-content 1fr;
  grid-gap: 10px;
  list-style: none;
}

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.a {
  grid-column: 1/2;
  grid-row: 1/3;
}

.b {
  grid-column: 2/3;
  grid-row: 1/2;
}

.c {
  grid-column: 2/3;
  grid-row: 2/3;
}

.d {
  grid-column: 3/4;
  grid-row: 1/3;
}

<ul>
  <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li>
  <li class=b>B</li>
  <li class=c>C</li>
  <li class=d>D</li>
</ul>

我希望网格折叠成一列，列表项达到300px时宽度为100％。

是否可以这样做，而无需执行以下媒体查询：

@media only screen and (max-width: 900px) {
    ul {
        display: block;
    }
}

Answer 1

我不得不更改您的HTML，您可能不喜欢它：

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 300px, auto ) );
  grid-template-rows: max-content 1fr;
  grid-gap: 10px;
  list-style: none;
}


li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}


ul ul{
  height:100%;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 4fr;
}

.b{background:transparent;padding:0;}
.b ul{padding:0;margin:0; }
.b li{border:1px solid;}

<ul>
  <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li>
  <li class="b">
    <ul>
     <li class="c">B</li>
     <li class="c">C</li>
    </ul>
  </li>
  <li class=d>D</li>
</ul>

这是重要的部分：grid-template-columns: repeat( auto-fit, minmax( 300px, auto ) ); 我从这篇文章中得到了这个主意：Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit

Answer 2

如评论中所述，如果您希望避免媒体查询，flexbox可能是一个更好的选择。此处的关键是在父级上声明flex-wrap: wrap;。由于html不能有ul以外的任何子代，因此您必须重新组织li来容纳一列。

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li {
  display: flex;
  background-color: #fff;
  border-radius: 3px;
  margin: 10px;
  padding: 20px;
  width: 270px;
  font-size: 14px;
}

.a {
  grid-column: 1/2;
  grid-row: 1/3;
}

.b {
  grid-column: 2/3;
  grid-row: 1/2;
}

.c {
  grid-column: 2/3;
  grid-row: 2/3;
}

.d {
  grid-column: 3/4;
  grid-row: 1/3;
}

<ul>
  <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li>
  <li class=b>B</li>
  <li class=c>C</li>
  <li class=d>D</li>
</ul>

无需媒体查询的自适应CSS网格

2 个答案: