1) Хочу задать контейнер с 8 столбцами и 4 строками, но в браузере появляется одна лишняя строка (красная). Почему?
2) Если добавляю
GRID-TEMPLATE-ROWS: REPEAT(4, 2EM);, то строка становится еще и толще, почему.
Я вижу это так, что я наоборот задаю 4 строки размером 2em, разве нет, откуда лишняя строка и почему она становится больше при
GRID-TEMPLATE-ROWS: REPEAT(4, 2EM);?
<body>
<div class="one"></div>
<div class="two">
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<style>
body{
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: minmax(2em, auto);
gap: 1px;
}
.one{
background-color: blue;
grid-area: 1/2/1/8;
}
.two{
background-color: blue;
grid-area:2/2/9/8;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: minmax(2em, auto)
}
.four{
grid-area: 2/2/3/8;
background-color: blueviolet;
}
.three{
background-color:blueviolet;
grid-area: 4/2/5/8;
}
.five{
grid-area: 5/2/6/8;
background-color: brown;
}
</style>
</body>
Простой
