Мощный инструмент для создания двухмерной сеточной системы с использованием строк и столбцов.
Недавно я начал работать над проектом, для которого требуется CSS Grid. Поначалу чтение документации было пугающим, но вскоре я понял, что добавить CSS Grid в свое приложение можно всего за несколько простых шагов.
Сначала добавьте следующий код в свое приложение React:
Проверьте это! Вы только что создали CSS-сетку! Чтобы высушить ваш код, вы также можете передать свойства компоненту Grid, чтобы определить количество необходимых вам элементов Grid.
Когда у вас есть рендеринг сетки в DOM, попробуйте поиграть со следующим в вашем файле CSS:
column-gap: 10px; //This adjusts the space between the columns row-gap: 10px; //This adjusts the space between the rows grid-template-columns: 60px; //This adjusts the width of the columns grid-template-rows: 60px; //This adjusts the width of the rows
CSS Grid - мощный инструмент для создания двухмерной сеточной системы с использованием строк и столбцов. Для более глубокого погружения в CSS Grid вот несколько ресурсов, которые я настоятельно рекомендую:
- Полное руководство по CSS Grid
- Grid Garden - это игра для изучения CSS Grid! 🤗