Узнайте о сетке CSS на практических примерах.
Вступление
Система сеток - одна из величайших функций, добавленных в CSS. Это позволяет легко выравнивать элементы по столбцам и строкам. Сетка CSS упрощает создание сложных и отзывчивых веб-страниц без использования плавающих элементов, таблиц или позиционирования. У него также есть много более мощных способностей, которые вы можете узнать, если будете много практиковаться.
В этой статье мы узнаем о CSS-сетке с некоторыми практическими примерами, которые помогут вам разобраться. Давайте приступим к делу.
Определите контейнер
Чтобы начать использовать систему сеток, вам нужно будет определить контейнер div или родительский div, в который вы поместите все дочерние элементы следующим образом:
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
Родительский div становится контейнером сетки, когда мы устанавливаем его отображение на grid или inline-grid в CSS.
Вот пример:
.container {
display: grid;
background-color: crimson;
padding: 10px;
}
.container > .child {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
margin: 5px;
}
Вывод:
Теперь вы можете использовать свойства контейнера, такие как justify-content align-items, например, чтобы центрировать дочерние элементы внутри контейнера div. Мы рассмотрим это в примерах ниже.
Сетка-шаблон-столбцы
Свойство grid-template-columns используется для определения количества столбцов в контейнере сетки. Это также помогает определить ширину каждого столбца.
Допустим, вы хотите определить 3 столбца внутри контейнера сетки. В этой ситуации вы можете использовать дроби fr в качестве значения свойства grid-template-columns. Дроби используются для разделения макета сетки на столбцы или строки.
Взгляните на пример ниже:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: crimson;
padding: 10px;
}
.container > .child {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
margin: 5px;
}
Как вы можете видеть выше, мы использовали 3 дроби 1fr, чтобы разделить наш грид-контейнер на 3 столбца.
Вывод:
Свойство grid-template-columns также можно использовать для указания ширины столбцов.
.container {
display: grid;
grid-template-columns: 200px 50px 150px 100px;
}
Вывод:
В дополнение к этому вы также можете установить свойство grid-template-columns на auto. В результате ширина столбца будет автоматически увеличиваться в зависимости от размера вашего экрана.
Вот пример:
.container {
display: grid;
grid-template-columns: auto auto;
}
Одна из замечательных вещей заключается в том, что вы можете легко создавать автоматически адаптивные макеты, используя grid-template-columns width функцию minmax(), которая принимает минимальную ширину и максимальную ширину в зависимости от размера экрана.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Например, представьте, что вам нужно отобразить список продуктов для приложения электронной коммерции. Ваша задача - сделать его адаптивным, поэтому вы решили отображать три продукта в столбце для настольных компьютеров, два продукта в столбце для планшетов и только один продукт в столбце для мобильных устройств. Взгляните на примеры ниже:
HTML:
<div class="grid"> <div class="item">Product 1</div> <div class="item">Product 2</div> <div class="item">Product 3</div> <div class="item">Product 4</div> <div class="item">Product 5</div> <div class="item">Product 6</div> </div>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
margin-top: 150px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item{
background: red;
padding: 20px;
color: wheat;
margin: 10px;
}
Это также автоматически определит количество столбцов в зависимости от размера вашего экрана. Когда ширина экрана минимальна, у вас будет только 1 столбец 1fr. Если ширина экрана слишком велика, у вас будет группа столбцов шириной 200 пикселей.
Сетка-шаблон-строки
Свойство grid-template-rows используется для определения количества строк в контейнере сетки. Он похож на grid-template-columns, с той лишь разницей, что теперь мы работаем со строками, а не со столбцами.
Допустим, мы хотим определить контейнер сетки с двумя столбцами и двумя строками. Мы можем сделать это, используя оба свойства grid-template-rows и grid-template-columns. Вот пример ниже:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Вывод:
Вы также можете использовать свойство grid-template-rows, чтобы определить ширину строки или автоматически растянуть ее, как мы это делали, используя grid-template-columns. Разницы нет, просто вместо столбцов мы работаем со строками.
Свойство сетки
Свойство grid-gap используется внутри родительского элемента для установки промежутка между столбцами и строками.
.container{
display: grid;
grid-template-columns: auto auto;
grid-gap: 15px;
}
Свойство align-content
Свойство align-content используется для выравнивания всей сетки внутри контейнера по вертикали.
Вот пример:
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50px 80px;
height: 400px;
align-content: center;
background-color: crimson;
padding: 10px;
}
Вывод:
Есть также некоторые другие значения, которые вы можете передать align-content, например:
space-between, start, space-around и end. Вы можете попробовать их в текстовом редакторе, чтобы увидеть различия.
Элементы сетки
CSS-сетка также имеет некоторые полезные свойства, которые вы можете передать дочерним элементам контейнера сетки, чтобы легко создавать сложные макеты сетки. Некоторые из этих свойств:
- сетка-столбец
- сетка
- сетка
Вы можете узнать о них на сайте W3schools, потому что, если я захочу осветить все в этой статье, вам придется прокручивать всю свою жизнь.
Заключение
Сетка - это потрясающая функция CSS, которая позволяет легко создавать сложные и гибкие структуры макета. Я настоятельно рекомендую вам попрактиковаться в этой функции, потому что практика - единственный способ улучшить ее.
Спасибо, что прочитали эту статью. Я надеюсь, что вы сочли полезным.
Больше Чтения
Если вас интересует более полезный контент, связанный с JavaScript и веб-разработкой, вы также можете подписаться на мою рассылку.
Вот еще одна полезная статья, которую стоит проверить по ссылке ниже:
