I am trying to show only the first two rows of a CSS GRID.
The width of the container is unknown therefore it should be responsive.
Also the content of each box is unknown.
我目前的老生常谈的解决方案是定义以下两条规则:
- 前两行使用自动高度
- 将下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>