Мощный инструмент для создания двухмерной сеточной системы с использованием строк и столбцов.

Недавно я начал работать над проектом, для которого требуется 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 вот несколько ресурсов, которые я настоятельно рекомендую: