如何重复网格自动行的高度

Question

我试图只显示 CSS 网格的前两行。
容器的宽度未知，因此它应该是响应式的。
而且每个盒子的内容都是未知的。

我目前的 hacky 解决方案是定义以下两个规则：

前两行使用自动高度
将接下来的277行的高度设置为0高度

grid-auto-rows: auto auto 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0;

我试过 repeat() 这样的：grid-auto-rows: auto auto repeat(277, 0px) 但不幸的是它没有将高度设置为 0。

是否有任何干净的方法来重复高度 0？

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  grid-auto-rows: auto auto 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0;
  overflow: hidden;
  padding: 0;
}

li {
  list-style: none;
  padding: 10px;
  border: 1px solid orange;
  overflow: hidden;
  margin: 0 5px 5px 0;
}

<h1><a href="https://en.wikipedia.org/wiki/List_of_colors:_A%E2%80%93F">Colors</a></h1>
<ul>
  <li>Android green</li>
  <li>Antique brass</li>
  <li>Antique bronze</li>
  <li>Antique fuchsia</li>
  <li>Antique ruby</li>
  <li>Antique white</li>
  <li>Ao (English)</li>
  <li>Apple green</li>
  <li>Apricot</li>
  <li>Aqua</li>
  <li>Aquamarine</li>
  <li>Arctic lime</li>
  <li>Army green</li>
  <li>Artichoke</li>
  <li>Arylide yellow</li>
  <li>Ash gray</li>
  <li>Asparagus</li>
  <li>Astronaut</li>
  <li>Atomic tangerine</li>
  <li>Auburn</li>
  <li>Aureolin</li>
  <li>Avocado</li>
  <li>Azure</li>
  <li>Azure (X11/web color)</li>
  <li>Baby blue</li>
  <li>Baby blue eyes</li>
  <li>Baby pink</li>
  <li>Baby powder</li>
  <li>Baker-Miller pink</li>
  <li>Banana Mania</li>
  <li>Barbie Pink</li>
  <li>Barn red</li>
  <li>Battleship grey</li>
  <li>Beau blue</li>
  <li>Beaver</li>
  <li>Beige</li>
  <li>B'dazzled blue</li>
  <li>Big dip o’ruby</li>
  <li>Bisque</li>
  <li>Bistre</li>
  <li>Bistre brown</li>
  <li>Bitter lemon</li>
  <li>Bitter lime</li>
  <li>Bittersweet</li>
  <li>Bittersweet shimmer</li>
  <li>Black</li>
  <li>Black bean</li>
  <li>Black chocolate</li>
  <li>Black coffee</li>
  <li>Black coral</li>
  <li>Black olive</li>
  <li>Black Shadows</li>
  <li>Blanched almond</li>
  <li>Blast-off bronze</li>
  <li>Bleu de France</li>
  <li>Blizzard blue</li>
  <li>Blond</li>
  <li>Blood red</li>
  <li>Blue</li>
  <li>Blue (Crayola)</li>
  <li>Blue (Munsell)</li>
  <li>Blue (NCS)</li>
  <li>Blue (Pantone)</li>
  <li>Blue (pigment)</li>
  <li>Blue (RYB)</li>
  <li>Blue bell</li>
  <li>Blue-gray</li>
  <li>Blue-green</li>
  <li>Blue-green (color wheel)</li>
  <li>Blue jeans</li>
  <li>Blue sapphire</li>
  <li>Blue-violet</li>
  <li>Blue-violet (Crayola)</li>
  <li>Blue-violet (color wheel)</li>
  <li>Blue yonder</li>
  <li>Bluetiful</li>
  <li>Blush</li>
  <li>Bole</li>
  <li>Bone</li>
  <li>Bottle green</li>
  <li>Brandy</li>
  <li>Brick red</li>
  <li>Bright green</li>
  <li>Bright lilac</li>
  <li>Bright maroon</li>
  <li>Bright navy blue</li>
  <li>Bright yellow (Crayola)</li>
  <li>Brilliant rose</li>
</ul>

Answer 1

为两行定义一个模板，然后使用 grid-auto-rows 和 0

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  grid-template-rows: auto auto;
  grid-auto-rows: 0;
  overflow: hidden;
  padding: 0;
}

li {
  list-style: none;
  padding: 10px;
  border: 1px solid orange;
  overflow: hidden;
  margin: 0 5px 5px 0;
}

<h1><a href="https://en.wikipedia.org/wiki/List_of_colors:_A%E2%80%93F">Colors</a></h1>
<ul>
  <li>Android green</li>
  <li>Antique brass</li>
  <li>Antique bronze</li>
  <li>Antique fuchsia</li>
  <li>Antique ruby</li>
  <li>Antique white</li>
  <li>Ao (English)</li>
  <li>Apple green</li>
  <li>Apricot</li>
  <li>Aqua</li>
  <li>Aquamarine</li>
  <li>Arctic lime</li>
  <li>Army green</li>
  <li>Artichoke</li>
  <li>Arylide yellow</li>
  <li>Ash gray</li>
  <li>Asparagus</li>
  <li>Astronaut</li>
  <li>Atomic tangerine</li>
  <li>Auburn</li>
  <li>Aureolin</li>
  <li>Avocado</li>
  <li>Azure</li>
  <li>Azure (X11/web color)</li>
  <li>Baby blue</li>
  <li>Baby blue eyes</li>
  <li>Baby pink</li>
  <li>Baby powder</li>
  <li>Baker-Miller pink</li>
  <li>Banana Mania</li>
  <li>Barbie Pink</li>
  <li>Barn red</li>
  <li>Battleship grey</li>
  <li>Beau blue</li>
  <li>Beaver</li>
  <li>Beige</li>
  <li>B'dazzled blue</li>
  <li>Big dip o’ruby</li>
  <li>Bisque</li>
  <li>Bistre</li>
  <li>Bistre brown</li>
  <li>Bitter lemon</li>
  <li>Bitter lime</li>
  <li>Bittersweet</li>
  <li>Bittersweet shimmer</li>
  <li>Black</li>
  <li>Black bean</li>
  <li>Black chocolate</li>
  <li>Black coffee</li>
  <li>Black coral</li>
  <li>Black olive</li>
  <li>Black Shadows</li>
  <li>Blanched almond</li>
  <li>Blast-off bronze</li>
  <li>Bleu de France</li>
  <li>Blizzard blue</li>
  <li>Blond</li>
  <li>Blood red</li>
  <li>Blue</li>
  <li>Blue (Crayola)</li>
  <li>Blue (Munsell)</li>
  <li>Blue (NCS)</li>
  <li>Blue (Pantone)</li>
  <li>Blue (pigment)</li>
  <li>Blue (RYB)</li>
  <li>Blue bell</li>
  <li>Blue-gray</li>
  <li>Blue-green</li>
  <li>Blue-green (color wheel)</li>
  <li>Blue jeans</li>
  <li>Blue sapphire</li>
  <li>Blue-violet</li>
  <li>Blue-violet (Crayola)</li>
  <li>Blue-violet (color wheel)</li>
  <li>Blue yonder</li>
  <li>Bluetiful</li>
  <li>Blush</li>
  <li>Bole</li>
  <li>Bone</li>
  <li>Bottle green</li>
  <li>Brandy</li>
  <li>Brick red</li>
  <li>Bright green</li>
  <li>Bright lilac</li>
  <li>Bright maroon</li>
  <li>Bright navy blue</li>
  <li>Bright yellow (Crayola)</li>
  <li>Brilliant rose</li>
</ul>

来自 the specification:

The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns. If multiple track sizes are given, the pattern is repeated as necessary to find the size of the affected tracks.

对于 repeat() 的想法，它只能与 grid-template-rows 一起使用，而不能与 grid-auto-rows 一起使用，但你不必这样做，因为 grid-auto-rows 就是为此目的而设计的“定义剩余行的高度

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  grid-template-rows: auto auto repeat(300,0);
  overflow: hidden;
  padding: 0;
}

li {
  list-style: none;
  padding: 10px;
  border: 1px solid orange;
  overflow: hidden;
  margin: 0 5px 5px 0;
}

<h1><a href="https://en.wikipedia.org/wiki/List_of_colors:_A%E2%80%93F">Colors</a></h1>
<ul>
  <li>Android green</li>
  <li>Antique brass</li>
  <li>Antique bronze</li>
  <li>Antique fuchsia</li>
  <li>Antique ruby</li>
  <li>Antique white</li>
  <li>Ao (English)</li>
  <li>Apple green</li>
  <li>Apricot</li>
  <li>Aqua</li>
  <li>Aquamarine</li>
  <li>Arctic lime</li>
  <li>Army green</li>
  <li>Artichoke</li>
  <li>Arylide yellow</li>
  <li>Ash gray</li>
  <li>Asparagus</li>
  <li>Astronaut</li>
  <li>Atomic tangerine</li>
  <li>Auburn</li>
  <li>Aureolin</li>
  <li>Avocado</li>
  <li>Azure</li>
  <li>Azure (X11/web color)</li>
  <li>Baby blue</li>
  <li>Baby blue eyes</li>
  <li>Baby pink</li>
  <li>Baby powder</li>
  <li>Baker-Miller pink</li>
  <li>Banana Mania</li>
  <li>Barbie Pink</li>
  <li>Barn red</li>
  <li>Battleship grey</li>
  <li>Beau blue</li>
  <li>Beaver</li>
  <li>Beige</li>
  <li>B'dazzled blue</li>
  <li>Big dip o’ruby</li>
  <li>Bisque</li>
  <li>Bistre</li>
  <li>Bistre brown</li>
  <li>Bitter lemon</li>
  <li>Bitter lime</li>
  <li>Bittersweet</li>
  <li>Bittersweet shimmer</li>
  <li>Black</li>
  <li>Black bean</li>
  <li>Black chocolate</li>
  <li>Black coffee</li>
  <li>Black coral</li>
  <li>Black olive</li>
  <li>Black Shadows</li>
  <li>Blanched almond</li>
  <li>Blast-off bronze</li>
  <li>Bleu de France</li>
  <li>Blizzard blue</li>
  <li>Blond</li>
  <li>Blood red</li>
  <li>Blue</li>
  <li>Blue (Crayola)</li>
  <li>Blue (Munsell)</li>
  <li>Blue (NCS)</li>
  <li>Blue (Pantone)</li>
  <li>Blue (pigment)</li>
  <li>Blue (RYB)</li>
  <li>Blue bell</li>
  <li>Blue-gray</li>
  <li>Blue-green</li>
  <li>Blue-green (color wheel)</li>
  <li>Blue jeans</li>
  <li>Blue sapphire</li>
  <li>Blue-violet</li>
  <li>Blue-violet (Crayola)</li>
  <li>Blue-violet (color wheel)</li>
  <li>Blue yonder</li>
  <li>Bluetiful</li>
  <li>Blush</li>
  <li>Bole</li>
  <li>Bone</li>
  <li>Bottle green</li>
  <li>Brandy</li>
  <li>Brick red</li>
  <li>Bright green</li>
  <li>Bright lilac</li>
  <li>Bright maroon</li>
  <li>Bright navy blue</li>
  <li>Bright yellow (Crayola)</li>
  <li>Brilliant rose</li>
</ul>

如何重复网格自动行的高度

how to repeat the height for grid-auto-rows

html

css

css-grid