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.
My current hacky solution is to define the following two rules:
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;
I tried repeat() like this: grid-auto-rows: auto auto repeat(277, 0px) but unfortunately it didn't set the height to 0.
Is there any clean way to repeat height 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>Define a template for the two rows and then use grid-auto-rows with 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>From 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.
For the repeat() idea it can only be used with grid-template-rows not grid-auto-rows but you don't have to because the grid-auto-rows was designed for this purpose "define the height of the remaining 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>