grid
Grid LayoutДля сетки нужен контейнер
Для того, чтобы сделать элемент контейнером сетки, достаточно использовать атрибут display, значением которого нужно установить grid
1Сделаем контейнером сетки элемент body
и сразу вставим в него три элемента div
<body>
<div></div>
<div></div>
<div></div>
</body>body {
margin: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 10vh 40vh 40vh 10vh;
}
div {
border: solid 1px darkred;
background: #ffaa0090;
}
Элемент body стал контенером для сетки потому, что мы использовали display: grid
Настройки сетки мы выполнили с помощью двух атрибутов:
- grid-template-columns
- grid-template-rows
Атрибут grid-template-columns позволяет настроить количество ячеек в строке и ширину ячеек сетки ( число и ширина колонок сетки )
Атрибут grid-template-rows позволяет настроить высоту и количество ячеек сетки по вертикали ( число и высота строк сетки )
Новая для вас единица измерения fr позволяет нам настраивать относительные размеры ячеек сетки:
grid-template-columns: 1fr 2fr 1fr означает, что все доступное пространство ( в нашем случае - ширина контейрера body ) будет разбито на 3 секции, причем ширина второй секции будет в два раза больше ширины первой и второй ( которые будут равны )
Обратите внимание, что помещенные в контейнер с сеткой элементы div автоматически заполняют ячейки сетки последовательно: первый элемент занимает первую ячейку сетки, второй - вторую и т.д.
Предположим, что мы не хотим, чтобы элементы располагались в ячейках сетки контейнера автоматически в порядке их следования
Мы хотим располагать их по своему усмотрению
Введем идентификаторы для групп ячеек сетки, которые будем указывать в квадратных скобках:
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;
}Как вы заметили, для элемента с идентификатором first мы также установили два новых для нас атрибута:
- grid-column
- grid-row
С их помощью мы можем гибко управлять положением элемента в сетке
Через слеш ( / ) указываются имена диапазонов ячеек, которые мы установили в атрибутах grid-template-columns и grid-template-rows
Элемент может занимать любой диапазон ячеек
Группа ячеек, имя которой указано после слеша ( / ), не будет входить в диапазон ячеек, занимаемых элементом
Теперь дадим идентификаторы элементам div:
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</body>
Как видите, мы бланополучно переместили первый элемент div в нужное место в сетке, а второй и третий элементы сдвинулись, чтобы занять освободившееся место
<main class="grid-container">
<div style="grid-column-start: 20;
grid-column-end: 80;
grid-row-start: 10;
grid-row-end: 40;
background-color: #09b;" class="__web-inspector-hide-shortcut__">
</div>
<div style="grid-column-start: 10;
grid-column-end: 15;
grid-row-start: 10;
grid-row-end: 90;
background-color: green;" class="__web-inspector-hide-shortcut__">
</div>
<div style="grid-column-start: 15;
grid-column-end: 20;
grid-row-start: 10;
grid-row-end: 90;
background-color: magenta;" class="__web-inspector-hide-shortcut__">
<span class="animated first">☀</span>
</div>
<div style="grid-column-start: 20;
grid-column-end: 80;
grid-row-start: 40;
grid-row-end: 90;
background-color: yellow;" class="__web-inspector-hide-shortcut__">
</div>
<div style="grid-column-start: 80;
grid-column-end: 85;
grid-row-start: 10;
grid-row-end: 90;
background-color: orange;" class="__web-inspector-hide-shortcut__">
<span class="animated second">☀</span>
</div>
<div style="grid-column-start: 85;
grid-column-end: 90;
grid-row-start: 10;
grid-row-end: 90;
background-color: green;" class="__web-inspector-hide-shortcut__">
</div>
</main>body {
margin: 0;
font-family: Arial;
}
div {
border: dotted 1px gray;
box-sizing: border-box;
/* padding: 1vw; */
text-align: center;
}
.grid-container {
margin: 0;
box-sizing: border-box;
display: grid;
grid-gap: 0;
grid-template-columns: repeat(100, 1vw);
grid-template-rows: repeat(100, 1vh);
}
.animated {
display: block;
position: relative;
bottom: -10%;
color: yellow;
font-size: 4vw;
}
.first {
animation: first 4s ease-in-out infinite;
}
.second {
animation: second 4s ease-in-out 2s infinite;
}
/* ==================== first ==================== */
@-webkit-keyframes first {
0% { top: 100%; opacity: 0; }
50% { opacity: 1; }
100% { top: 0%; opacity: 0; }
}
@keyframes first {
0% { top: 100%; opacity: 0; }
50% { opacity: 1; }
100% { top: 0%; opacity: 0; }
}
/* ==================== second ==================== */
@-webkit-keyframes second {
0% { top: 0%; opacity: 0; }
50% { opacity: 1; }
100% { top: 90%; opacity: 0; }
}
@keyframes second {
0% { top: 0%; opacity: 0; }
50% { opacity: 1; }
100% { top: 90%; opacity: 0; }
}
Всемирная паутина
Пример
Flexbox Froggy
