代码之家 › 专栏 › 技术社区 › Daniel Sloof

无媒体查询的响应式CSS网格

responsive grid css html

Daniel Sloof · 技术社区 · 8 年前

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;
    }
}

2 回复 | 直到 8 年前

-2

Serg Chernata 8 年前

如评论所述, 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>