Рассмотрим на примере.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS GRID</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<div class="grid-item grid-item-1">1</div>
<div class="grid-item grid-item-2">2</div>
<div class="grid-item grid-item-3">3</div>
<div class="grid-item grid-item-4">4</div>
<div class="grid-item grid-item-5">5</div>
<div class="grid-item grid-item-6">6</div>
<div class="grid-item grid-item-5">7</div>
<div class="grid-item grid-item-6">8</div>
</div>
</body>
</html>
style.css
body {
margin: 0;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.grid-item {
padding: .6em;
}
.grid-item:nth-of-type(even) {
background: #e0e0e0;
}
.grid-item:nth-of-type(odd) {
background: #cccccc;
}
.grid {
display: grid; /* это grid-контейнер */
/* 1) Задается кол-во колонок и их ширина: 3 колонки по 200px.
Если нам нужно 3 колонки, то мы пишем 3 значания, если больше, то большее кол-во значений.
*/
/* grid-template-columns: 200px 200px 200px; */
/*2) Можно указывать значение во фракциях.
Фракции - единицы, которые показывают сколько занимает каждая колонка от общей ширины контейнера, в котором находятся все колонки.
*/
/* grid-template-columns: 2fr 1fr 1fr; */
/*
3) Первый аргумент repeat используется для указания кол-ва колонок.
grid-template-columns: repeat(3, 1fr);
Здесь первая колонка будет 100px:
grid-template-columns: 100px repeat(3, 1fr 2fr);
*/
/*
4) minmax(150px, 1fr), где 150px - минимальное значение колонки, а 1fr - максимальное значение.
grid-template-columns: 1fr minmax(150px, 1fr) 1fr;
*/
/*
5) Зададим значения рядов.
grid-template-rows: 200px 150px 100px;
*/
/*
6)
grid-auto-rows задает высоту рядов по умолчанию.
grid-auto-rows: 100px;
Также мы можем сделать высоту более гибкой.
grid-auto-rows: minmax(100px, auto);
*/
/*
7) Мы можем задавть пространство между колонками и рядами.
grid-column-gap: 10px;
grid-row-gap: 10px;
Сокращенная запись: grid-gap: 10px;
Или
grid-gap: 10px 20px;
*/
/*
8) Чтобы сделать адаптивную сетку, не прибегая к медиа-запросам.
auto-fill помещает максимальное кол-во элементов в колонку.
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
auto-fit элементы в строке полностью растягиваются и занимают пространство.
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
*/
grid-template-columns: repeat(3, 1fr);
/*
10) Как выравнивать элементы по горизонтали и вертикали.
ГОРИЗОНТАЛЬНОЕ ВЫРАВНИВАНИЕ.
Растяним элементы на все возможное пространство по горизонлали: justify-items: stretch;
Здесь элементы прижмутся к началу ячейки: justify-items: start;
Здесь элементы прижмутся к концу ячейки: justify-items: end;
Здесь элементы прижмутся к центру ячейки: justify-items: center;
Исполльзуем значения: stretch, start, end, center
align-items: center;
justify-items: center;
align-items: center;
grid-auto-rows: 100px;
*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
/*
Также мы можем вырвнивать отдельные элементы c помощью свойств: justify-self и align-self.
.grid-item-2 {
justify-self: end;
align-self: end;
}
*/
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS GRID</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<div class="grid-item grid-item-1">1</div>
<div class="grid-item grid-item-2">2</div>
<div class="grid-item grid-item-3">3</div>
<div class="grid-item grid-item-4">4</div>
<div class="grid-item grid-item-5">5</div>
<div class="grid-item grid-item-6">6</div>
<div class="grid-item grid-item-5">7</div>
<div class="grid-item grid-item-6">8</div>
</div>
</body>
</html>
style.css
body {
margin: 0;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.grid-item {
padding: .6em;
}
.grid-item:nth-of-type(even) {
background: #e0e0e0;
}
.grid-item:nth-of-type(odd) {
background: #cccccc;
}
.grid {
display: grid; /* это grid-контейнер */
/* 1) Задается кол-во колонок и их ширина: 3 колонки по 200px.
Если нам нужно 3 колонки, то мы пишем 3 значания, если больше, то большее кол-во значений.
*/
/* grid-template-columns: 200px 200px 200px; */
/*2) Можно указывать значение во фракциях.
Фракции - единицы, которые показывают сколько занимает каждая колонка от общей ширины контейнера, в котором находятся все колонки.
*/
/* grid-template-columns: 2fr 1fr 1fr; */
/*
3) Первый аргумент repeat используется для указания кол-ва колонок.
grid-template-columns: repeat(3, 1fr);
Здесь первая колонка будет 100px:
grid-template-columns: 100px repeat(3, 1fr 2fr);
*/
/*
4) minmax(150px, 1fr), где 150px - минимальное значение колонки, а 1fr - максимальное значение.
grid-template-columns: 1fr minmax(150px, 1fr) 1fr;
*/
/*
5) Зададим значения рядов.
grid-template-rows: 200px 150px 100px;
*/
/*
6)
grid-auto-rows задает высоту рядов по умолчанию.
grid-auto-rows: 100px;
Также мы можем сделать высоту более гибкой.
grid-auto-rows: minmax(100px, auto);
*/
/*
7) Мы можем задавть пространство между колонками и рядами.
grid-column-gap: 10px;
grid-row-gap: 10px;
Сокращенная запись: grid-gap: 10px;
Или
grid-gap: 10px 20px;
*/
/*
8) Чтобы сделать адаптивную сетку, не прибегая к медиа-запросам.
auto-fill помещает максимальное кол-во элементов в колонку.
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
auto-fit элементы в строке полностью растягиваются и занимают пространство.
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
*/
grid-template-columns: repeat(3, 1fr);
/*
10) Как выравнивать элементы по горизонтали и вертикали.
ГОРИЗОНТАЛЬНОЕ ВЫРАВНИВАНИЕ.
Растяним элементы на все возможное пространство по горизонлали: justify-items: stretch;
Здесь элементы прижмутся к началу ячейки: justify-items: start;
Здесь элементы прижмутся к концу ячейки: justify-items: end;
Здесь элементы прижмутся к центру ячейки: justify-items: center;
Исполльзуем значения: stretch, start, end, center
align-items: center;
justify-items: center;
align-items: center;
grid-auto-rows: 100px;
*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
/*
Также мы можем вырвнивать отдельные элементы c помощью свойств: justify-self и align-self.
.grid-item-2 {
justify-self: end;
align-self: end;
}
*/
Комментариев нет:
Отправить комментарий