grid row and grid column
Именованные диапазоны ячеек сеткиПредположим, что мы не хотим, чтобы элементы располагались в ячейках сетки контейнера автоматически в порядке их следования
Мы хотим располагать их по своему усмотрению
3Введем идентификаторы для групп ячеек сетки, которые будем указывать в квадратных скобках:
body {
...
grid-template-columns: [left] 1fr [center] 2fr [right] 1fr;
grid-template-rows: [top] 10vh [middle-top] 40vh [middle-bottom] 40vh [bottom] 10vh;
}А для элемента с идентификатором first установим два новых для нас атрибута:
- grid-column
- grid-row
С их помощью мы можем гибко управлять положением элемента в сетке
#first {
grid-column: center / right;
grid-row: middle-bottom / bottom;
}Обратите внимание, что через слеш ( / ) указываются имена диапазонов ячеек, которые мы установили в атрибутах grid-template-columns и grid-template-rows
Т.е. мы создали именованные диапазоны ячеек контейнера сетки,
а затем использовали имена диапазонов для описания того, куда мы хотим поместить элемент
Элемент может занимать любой непрерывный диапазон ячеек, образующих прямоугольник
Группа ячеек, имя которой указано после слеша ( / ), не будет входить в диапазон ячеек, занимаемых элементом
body {
margin: 0;
font-family: Arial;
display: grid;
grid-template-columns: [left] 1fr [center] 2fr [right] 1fr;
grid-template-rows: [top] 10vh [middle-top] 40vh [middle-bottom] 40vh [bottom] 10vh;
}
div {
border: solid 1px darkred;
background: #ffaa0090;
padding: 10px 20px;
font-weight: bold;
}
#first {
grid-column: center / right;
grid-row: middle-bottom / bottom;
}Теперь дадим идентификаторы элементам div:
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</body>
Как видите, мы благополучно переместили первый элемент div в нужное место в сетке, а второй и третий элементы сдвинулись, чтобы занять освободившееся место
Давайте переместим второй элемент
Для этого установим для него значения атрибутов grid-column и grid-row:
#second {
grid-column: left / right;
grid-row: middle-top / middle-bottom;
}
Второй элемент div благополучно "переехал" на новую "жилплощадь", причем занял не одну, а сразу две ячейки сетки, а третий элементы сдвинулся и занял освободившееся место
Всемирная паутина
Пример
Flexbox Froggy
