Доверьте продвижение нам

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

от 1 499 098 

Как использовать grid CSS

Views Icon3

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.

Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.