tgoop.com/webdevlair/3944
Create:
Last Update:
Last Update:
CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов.
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
gap: 10px; /* Расстояние между элементами */
}
.item {
background: lightblue;
padding: 20px;
text-align: center;
}
</style>
🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.