Estoy tratando de mostrar solo las dos primeras filas de un CSS GRID.
Se desconoce el ancho del contenedor, por lo tanto, debe ser receptivo.
También se desconoce el contenido de cada caja.
Mi solución hacky actual es definir las siguientes dos reglas:
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;
Intenté repetir () así: grid-auto-rows: auto auto repeat(277, 0px) pero desafortunadamente no configuró la altura en 0.
¿Hay alguna forma limpia de repetir la altura 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>Defina una plantilla para las dos filas y luego use grid-auto-rows con 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>De la especificación :
Las propiedades grid-auto-columns y grid-auto-rows especifican el tamaño de las pistas a las que grid-template-rows o grid-template-columns no han asignado un tamaño. Si se dan varios tamaños de pista, el patrón se repite según sea necesario para encontrar el tamaño de las pistas afectadas.
Para la idea de repeat() , solo se puede usar con grid-template-rows no grid-auto-rows pero no es necesario porque grid-auto-rows fue diseñado para este propósito "define la altura de las filas restantes "
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>