Grid CSS (сетка в CSS) является одним из самых мощных инструментов CSS для создания макетов. Он предоставляет возможность создавать сложные сетки из столбцов и строк, которые могут быть настроены на различные размеры и располагаться на странице разными способами.
Вот базовый пример использования Grid CSS:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.item {
background-color: #ddd;
padding: 20px;
text-align: center;
}Здесь мы создаем простую сетку из 4 элементов, содержащих текст. Свойство display: grid; применяется к родительскому элементу .container и указывает браузеру, что мы хотим использовать Grid CSS для расположения элементов внутри него.
С помощью свойства grid-template-columns мы определяем ширину каждого столбца. В данном случае мы указываем, что хотим использовать 2 одинаково широких столбца с помощью функции repeat(2, 1fr).
Свойство grid-gap указывает расстояние между элементами в сетке.
Стили элементов .item определяют общий вид каждого элемента в сетке.
Кроме того, с Grid CSS вы можете создавать и другие сложные макеты на основе нескольких строк и столбцов, а также контролировать их размеры и размещение.
Поддержка Grid CSS начинается с браузеров Internet Explorer 11 и Edge, а также с версии Chrome 57, Firefox 52 и Safari 10.1.
