Руководство для начинающих по CSS Grid Layout

* CSS Grid — это система компоновки для Интернета, позволяющая разработчикам создавать сложные адаптивные дизайны с использованием строк и столбцов. * Сетка используется для упрощения создания сложных макетов веб-дизайна.

Давайте углубимся в это.

Перво-наперво, мы должны создать div и присвоить ему класс контейнеров или что угодно.

<div class="container">
  <div>one</div>
  <div>two</div>
</div>

После создания нашего div давайте перейдем к нашему CSS и начнем применять к нему сетку. мы назначаем нашему контейнеру свойство отображения сетки.

.container{
display: grid;
}

Теперь, после назначения display: grid; ничего не происходит, потому что мы не установили ширину контейнера, поэтому для этого в Grid есть другое свойство для установки ширины, которая равна «столбцам сетки-шаблона».

.container{
display: grid;
grid-template-columns: 50% 50%;
}

Итак, это дает нам два столбца, каждый из которых имеет ширину 50%.

ПРИМЕЧАНИЕ. Существует свойство Short-hand для записи grid-template-columns,

.container{
display: grid;
grid-template-columns: repeat(2, 50%);
}

Свойство «repeat ()» работает так же, как и указанные выше значения, которые составляют 50% & 50%, но здесь вместо того, чтобы писать 50% дважды, мы устанавливаем его на Repeat(), а затем на «2», что означает создание «2» столбцов & затем "50%", что означает установить ширину 50%.

:::подсказка КЛЮЧЕВОЙ МОМЕНТ: вместо использования % или пикселей мы используем fr (доля) в значении столбцов сетки-шаблона. напр. 1 фр., 2 фр., 1/2 фр. ..... и т. д.

:::

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
}

"fr" работает очень хорошо, и его очень важно добавить для обеспечения отзывчивости веб-сайта.

Теперь, если нам нужны пробелы ч/б наших сеток, то свойство для этого в сетке — «зазор или зазор сетки или зазор строки/зазор столбца».

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px
}

* Это свойство grid-gap дает нам пространство в 10 пикселей вокруг наших строк и столбцов. * Если вы хотите добавить пробел в черно-белых строках или столбцах, вы можете использовать свойство row-gap или column-gap.

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 10px;
} 

or or or

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
}

Теперь, чтобы добавить высоту нашему контейнеру, мы используем свойство в сетке, называемое "grid-template-rows".

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-template-rows: 200px;
}

==Но в "grid-template-rows" есть подвох== Теперь, исходя из приведенного выше примера, вы можете подумать, что, если наш контент больше 200 пикселей, а затем наш контент начинает переполняться и это не очень хорошо выглядит на макетах, так что здесь может быть решение. Вы, должно быть, думаете, о, я бы хотел, чтобы было свойство, которое настраивается в соответствии с содержимым... и угадайте, что для этого есть свойство, называемое =="grid-auto-rows" .==

 .container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(200px, auto);
}

* Теперь в свойстве "grid-auto-rows" вы пишете ==minmax(),== и в скобках добавляете ==два значения.== В приведенных выше примерах мы добавляем "200px" как ==минимальное значение== и "auto" как ==максимальное значение.==

* Если наш контент меньше 200 пикселей или ровно 200 пикселей, проблем не будет, и он легко помещается, но если наш контент больше 200 пикселей, скажем, 300 пикселей, тогда наше автоматическое свойство работает, и наши строки будут корректироваться в соответствии с размер содержимого и легко помещается без переполнения.

Есть и другие свойства сетки, но я думаю, что если вы попрактикуетесь с показанными выше, вы легко создадите очень хороший и отзывчивый макет. Имейте в виду, что, выполняя только показанные выше примеры, вы не можете создать макет, вам нужно добавить поля, отступы и все другие основные свойства.

Это все, что касается CSS Grids с моей стороны, не стесняйтесь оставлять отзывы и области, в которых я должен улучшить себя, поскольку я сейчас учусь......

Также опубликовано здесь