Свойство grid-auto-rows и много чего еще

@Marchuk · Регистрация: 10.07.2018

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Верстал простенький шаблон с помощью гридов и вот что заметил:
1)Свойство

Код

grid-auto-rows

со значением

Код

minmax(10px, auto)

~~не работает~~. Видимо я неправильно его применяю,раз толщина ячеек никак не уменьшается.
2)Если посмотреть на шаблон с небольшим кол-вом текста - то все нормально:

Свойство grid-auto-rows и много чего еще

Но если вставить в один из div'ов реально много текста, то получается следующаяя картина:

Я понимаю, что это все из за того,что все ячейки имеют одинаковую высоту. Как это отключить?

Также прилагаю код:

HTML:

Код

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <script src="main.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="element header">Loreres. Odit, illo.
        </div>
        <div class="element sidebar">Lonsequatur molestiae veue illum odit doloribus quaerat.
        </div>
        <div class="element content"> Loremelit. Fugi obcaecati! Ipsa deleniti dignissimos, optio porro nobis odit possimus?
        </div>
        <div class="element footer">Lorerunt, delumquam libero quod veniam, ipsam expedita. Officiis, placeat?
        </div>
    </div>
</body>
</html>

CSS:

Код

   .wrapper{
 display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border:2px solid black;
}
.element{
    padding: 20px;

}
.header{
    grid-column: 1/5;
    background-color:rgb(221, 50, 50);
    grid-auto-rows: minmax(10px, auto);
}
.sidebar{
    grid-auto-rows: minmax(10px, auto); /*!!!!!*/
    background-color: rgb(123, 245, 67);
}
.content{
    grid-column: 2/5;
    background-color: rgb(209, 209, 86);
    grid-auto-rows: minmax(10px, auto);
}
.footer{
    grid-column: 1/5;
    background-color: rgb(147, 72, 218);
}

Прошу объяснить, что и где я сделал не так, желательно тыкнуть носом. Заранее всех благодарю

@Qwerty_Wasd · 20.02.2019, 02:04

Marchuk,

Сообщение от Marchuk

Прошу объяснить, что и где я сделал не так, желательно тыкнуть носом

Сначала носом - скрин

Сетка формируется в стилях контейнера, а не его итемов. Вместо тысячи слов - https://codepen.io/qwerty_wasd/pen/jdJYgv

CSS

.wrapper{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(10px, auto);
  border:2px solid black;
}
.element{
  padding: 20px;
 
}
.header{
  grid-column: 1/5;
  background-color:rgb(221, 50, 50);
}
.sidebar{
  background-color: rgb(123, 245, 67);
}
.content{
  grid-column: 2/5;
  background-color: rgb(209, 209, 86);
}
.footer{
  grid-column: 1/5;
  background-color: rgb(147, 72, 218);
}

@Marchuk 2 / 2 / 1 Регистрация: 10.07.2018 Сообщений: 20
		1
	Свойство grid-auto-rows и много чего еще 20.02.2019, 00:04. Показов 1876. Ответов 1 Метки grid, grid css, html, html5, адаптивная верстка (Все метки) Доброго времени суток. Верстал простенький шаблон с помощью гридов и вот что заметил: 1)Свойство Код grid-auto-rows со значением Код minmax(10px, auto) ~~не работает~~. Видимо я неправильно его применяю,раз толщина ячеек никак не уменьшается. 2)Если посмотреть на шаблон с небольшим кол-вом текста - то все нормально: Но если вставить в один из div'ов реально много текста, то получается следующаяя картина: Я понимаю, что это все из за того,что все ячейки имеют одинаковую высоту. Как это отключить? Также прилагаю код: HTML: Код <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="style.css"> <script src="main.js"></script> </head> <body> <div class="wrapper"> <div class="element header">Loreres. Odit, illo. </div> <div class="element sidebar">Lonsequatur molestiae veue illum odit doloribus quaerat. </div> <div class="element content"> Loremelit. Fugi obcaecati! Ipsa deleniti dignissimos, optio porro nobis odit possimus? </div> <div class="element footer">Lorerunt, delumquam libero quod veniam, ipsam expedita. Officiis, placeat? </div> </div> </body> </html> CSS: Код .wrapper{ display:grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); border:2px solid black; } .element{ padding: 20px; } .header{ grid-column: 1/5; background-color:rgb(221, 50, 50); grid-auto-rows: minmax(10px, auto); } .sidebar{ grid-auto-rows: minmax(10px, auto); /!!!!!/ background-color: rgb(123, 245, 67); } .content{ grid-column: 2/5; background-color: rgb(209, 209, 86); grid-auto-rows: minmax(10px, auto); } .footer{ grid-column: 1/5; background-color: rgb(147, 72, 218); } Прошу объяснить, что и где я сделал не так, желательно тыкнуть носом. Заранее всех благодарю 0

Опции темы

Свойство grid-auto-rows и много чего еще

Решение