<section id="description">
<p>Чтобы превратить любой HTML элемент в грид контейнер установите свойство <code>display</code> в <code>grid</code> . Это даёт вам возможность использовать другие свойства, связанные с CSS Grid. <strong>Примечание</strong> <br> В CSS Grid родительский элемент называется <dfn>контейнером,</dfn> а его дочерние элементы называются <dfn>элементами</dfn> .</p></section>

Create Your First CSS Grid

<section id="description">
<p>Просто создать грид элемент недостаточно. Вам также необходимо определить структуру грида. Чтобы добавить несколько столбцов в грид, используйте свойство <code>grid-template-columns</code> в контейнере грида  как показано ниже: <blockquote> .container { <br> display: grid; <br> grid-template-columns: 50px 50px; <br> } </blockquote> Теперь в вашем гриде два столбца, каждый шириной 50 пикселей. Количество параметров, заданных для свойства <code>grid-template-columns</code> , указывает количество столбцов в сетке, а значение каждого параметра указывает ширину каждого столбца.</p></section>

Add Columns with grid-template-columns

<section id="description">
<p>Грид, который вы создали в прошлом упражнении, автоматически устанавливает количество строк. Чтобы вручную задать строки, используйте свойство <code>grid-template-rows</code> точно также как вы использовали <code>grid-template-columns</code> в предыдущем упражнении.</p></section>

Add Rows with grid-template-rows

<section id="description">
<p>В CSS Grid вы можете использовать абсолютные и относительные единицы измерения, такие как <code>px</code> и <code>em</code>, чтобы определить размер строк и столбцов. Также вы можете использовать следующие единицы измерения: <code>fr</code> : устанавливает столбцу или строке долю доступного пространства, <code>auto</code> :  устанавливает столбцу или строке ширину или высоту по содержимому автоматически, <code>%</code> : устанавливает столбцу или строке процентную ширину его контейнера. Вот код, который генерирует вывод в предварительном просмотре: <blockquote> grid-template-columns: auto 50px 10% 2fr 1fr; </blockquote> Этот фрагмент создает пять столбцов. Ширина первого столбца задается его содержимым, второй столбец шириной 50 пикселей, третий столбец шириной 10% от ширины его контейнера и последние два столбца делят оставшееся пространство между собой в отношении 2 к 1, две доли - четвёртому столбцу и одна доля - пятому.</p></section>

Use CSS Grid units to Change the Size of Columns and Rows

<section id="description">
<p>До сих пор в гридах, которые вы создавали, столбцы были рядом друг с другом. Иногда вам нужен промежуток между столбцами. Чтобы добавить промежуток между столбцами, используйте свойство <code>grid-column-gap</code> следующим образом: <blockquote> grid-column-gap: 10px; </blockquote> Пример задаёт 10px пустого пространства между всеми нашими столбцами.</p></section>

Create a Column Gap Using grid-column-gap

<section id="description">
<p>Вы можете добавить промежуток между строками грида, используя <code>grid-row-gap</code> таким же образом, что вы добавили промежуток между столбцами в предыдущем упражнении.</p></section>

Create a Row Gap using grid-row-gap

<section id="description">
<p><code>grid-gap</code> - это сокращенное свойство для <code>grid-row-gap</code> и <code>grid-column-gap</code> из двух предыдущих упражнений, которое более удобно в использовании. Если <code>grid-gap</code> имеет одно значение, это создаст разрыв между всеми строками и столбцами. Однако, если есть два значения, он будет использовать первое, чтобы установить разрыв между строками, и второе значение - между столбцами.</p></section>

Add Gaps Faster with grid-gap

<section id="description">
<p>До этого момента все свойства, которые обсуждались, предназначены для грид контейнеров. Свойство <code>grid-column</code> - первое свойство для использования в элементах грида. Гипотетические горизонтальные и вертикальные линии, которые создают грид, называются <dfn>линиями</dfn> . Эти линии нумеруются начиная с 1 в верхнем левом углу грида и перемещаются вправо для столбцов и вниз для строк. Вот как выглядят линии для грида 3x3: <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;"> линии столбцов </p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 1 </p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 2 </p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 3 </p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 4 </p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;"> линии строк </p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;"> 1 </p><p style="left:-10%;top:21%;font-size:130%;position:absolute;"> 2 </p><p style="left:-10%;top:53%;font-size:130%;position:absolute;"> 3 </p><p style="left:-10%;top:85%;font-size:130%;position:absolute;"> 4 </p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div> Чтобы контролировать количество столбцов, которые будет занимать элемент, вы можете использовать свойство <code>grid-column</code> в сочетании с номерами линий начала и конца элемента. Вот пример: <blockquote> grid-column: 1/3; </blockquote> Это приведет к тому, что элемент начнется с первой вертикальной линии грида слева и продолжится до третьей линии грида, занимая два столбца.</p></section>

Use grid-column to Control Spacing

<section id="description">
<p>Конечно, вы можете создать элементы, занимающие несколько строк, также как вы делали это со столбцами. Для этого необходимо определить горизонтальные линии, в которых вы хотите чтобы элемент начинался и заканчивался при помощи свойства <code>grid-row</code> на элементе грида.</p></section>

Use grid-row to Control Spacing

<section id="description">
<p>В CSS Grid содержимое каждого элемента находится в так называемой <dfn>ячейке</dfn> . Вы можете выравнивать содержимое внутри ячейки по горизонтали, используя свойство <code>justify-self</code> для элемента грида. По умолчанию это свойство имеет значение <code>stretch</code> , т.е. содержимое заполняет всю ширину ячейки. Это свойство CSS Grid принимает и другие значения: <code>start</code> : выравнивает содержимое по левую сторону ячейки, <code>center</code> : выравнивает содержимое по центру ячейки, <code>end</code> : выравнивает содержимое по правую сторону ячейки.</p></section>

Align an Item Horizontally using justify-self

<section id="description">
<p>Так же, как вы можете выровнять элемент по горизонтали, есть способ выровнять элемент по вертикали. Для этого вы используете свойство <code>align-self</code> для элемента. Это свойство принимает все те же значения, что и <code>justify-self</code> из последнего вызова.</p></section>

Align an Item Vertically using align-self

<section id="description">
<p>Иногда вы хотите, чтобы все элементы в вашей сетке CSS имели одинаковое выравнивание. Вы можете использовать ранее изученные свойства и выровнять их по отдельности, или вы можете выровнять их все горизонтально, используя <code>justify-items</code> в контейнере сетки. Это свойство может принимать все те же значения, о которых вы узнали в предыдущих двух задачах, разница в том, что он переместит <b>все</b> элементы нашей сетки в желаемое выравнивание.</p></section>

Align All Items Horizontally using justify-items

<section id="description">
<p>Использование свойства <code>align-items</code> в контейнере сетки будет устанавливать вертикальное выравнивание для всех элементов в нашей сетке.</p></section>

Align All Items Vertically using align-items

<section id="description">
<p>Вы можете группировать ячейки вашей сетки вместе в <dfn>область</dfn> и присваивать области свое имя. Сделайте это, используя области <code>grid-template-areas</code> в контейнере следующим образом: <blockquote> Сетка-шаблон-направления: <br> "заголовок заголовка заголовка" <br> «контент содержания рекламы» <br> «нижний колонтитул нижнего колонтитула»; </blockquote> Приведенный выше код объединяет три верхние ячейки вместе в <code>header</code> , нижние три ячейки в область нижнего <code>footer</code> , и он делает две области в средней строке; <code>advert</code> и <code>content</code> . <strong>Заметка</strong> <br> Каждое слово в коде представляет собой ячейку, и каждая пара кавычек представляет собой строку. В дополнение к пользовательским ярлыкам вы можете использовать период ( <code>.</code> ) Для обозначения пустой ячейки в сетке.</p></section>

Divide the Grid Into an Area Template

<section id="description">
<p>После создания шаблона областей для вашего контейнера сетки, как показано в предыдущем вызове, вы можете поместить элемент в свою настраиваемую область, указав имя, которое вы ему дали. Для этого вы используете свойство <code>grid-area</code> для элемента, подобного этому: <blockquote> .item1 {grid-area: header; } </blockquote> Это позволяет сетке знать, что вы хотите, чтобы класс <code>item1</code> находился в <code>header</code> . В этом случае элемент будет использовать всю верхнюю строку, потому что целая строка называется зоной заголовка.</p></section>

Place Items in Grid Areas Using the grid-area Property

<section id="description">
<p>Свойство <code>grid-area</code> вы узнали в последней задаче, можно использовать по-другому. Если в вашей сетке нет шаблона областей для ссылки, вы можете создать область «на лету» для элемента, который будет размещен следующим образом: <blockquote> item1 {сетка: 1/1/2/4; } </blockquote> Это использует номера строк, которые вы узнали ранее, чтобы определить, где будет область для этого элемента. Цифры в приведенном выше примере представляют эти значения: <blockquote> grid-area: горизонтальная линия для начала / вертикальной линии для начала / горизонтальной линии до конца на / вертикальной линии до конца; </blockquote> Таким образом, элемент в примере будет потреблять строки между строками 1 и 2 и столбцы между строками 1 и 4.</p></section>

Use grid-area Without Creating an Areas Template

<section id="description">
<p>Когда вы использовали <code>grid-template-columns</code> и <code>grid-template-rows</code> для определения структуры сетки, вы ввели значение для каждой строки или столбца, который вы создали. Допустим, вам нужна сетка со 100 рядами одинаковой высоты. Внести 100 значений по отдельности не очень удобно. К счастью, есть лучший способ - с помощью функции <code>repeat</code> указать количество раз, когда вы хотите <code>repeat</code> свой столбец или строку, а затем запятую и значение, которое вы хотите повторить. Вот пример, который создавал бы сетку из 100 строк, каждая строка была бы высотой 50 пикселей. <blockquote> grid-template-rows: repeat (100, 50px); </blockquote> Вы также можете повторить несколько значений с помощью функции повтора и вставить функцию среди других значений при определении структуры сетки. Вот что я имею в виду: <blockquote> grid-template-columns: repeat (2, 1fr 50px) 20px; </blockquote> Это означает: <blockquote> grid-template-columns: 1fr 50px 1fr 50px 20px; </blockquote> <strong>Заметка</strong> <br> <code>1fr 50px</code> повторяется дважды, затем 20px.</p></section>

Reduce Repetition Using the repeat Function

<section id="description">
<p>Существует еще одна встроенная функция для использования с <code>grid-template-columns</code> и <code>grid-template-rows</code> называемыми <code>minmax</code> . Он используется для ограничения размера элементов, когда контейнер сетки меняет размер. Для этого вам нужно указать допустимый диапазон размеров для вашего товара. Вот пример: <blockquote> grid-template-columns: 100px minmax (50px, 200px); </blockquote> В приведенном выше коде <code>grid-template-columns</code> установлены для создания двух столбцов; первая ширина 100px, а вторая имеет минимальную ширину 50px и максимальную ширину 200px.</p></section>

Limit Item Size Using the minmax Function

<section id="description">
<p>Функция повтора поставляется с опцией, называемой <dfn>автозаполнением</dfn> . Это позволяет автоматически вставлять столько строк или столбцов требуемого размера, сколько возможно, в зависимости от размера контейнера. Вы можете создавать гибкие макеты при объединении <code>auto-fill</code> с <code>minmax</code> . В предварительном просмотре <code>grid-template-columns</code> установлены на <blockquote> repeat (автозаполнение, minmax (60px, 1fr)); </blockquote> Когда контейнер меняет размер, эта настройка сохраняет вставки столбцов 60px и растягивает их до тех пор, пока не сможет вставить другой. <strong>Заметка</strong> <br> Если ваш контейнер не может поместить все ваши предметы в одну строку, он переместит их на новый.</p></section>

Create Flexible Layouts Using auto-fill

<section id="description">
<p><code>auto-fit</code> работает почти идентично <code>auto-fill</code> . Единственное различие заключается в том, что, когда размер контейнера превышает размер всех объединенных элементов, <code>auto-fill</code> сохраняет вставки пустых строк или столбцов и толкает ваши элементы в сторону, в то время как <code>auto-fit</code> сворачивает эти пустые строки или столбцы и растягивает ваши элементы до установите размер контейнера. <strong>Заметка</strong> <br> Если ваш контейнер не может поместить все ваши предметы в одну строку, он переместит их на новый.</p></section>

Create Flexible Layouts Using auto-fit

<section id="description">
<p>CSS Grid может быть простым способом сделать ваш сайт более отзывчивым, используя медиа-запросы, чтобы изменить области сетки, изменить размеры сетки и изменить порядок размещения элементов. В предварительном просмотре, когда ширина области просмотра составляет 300 пикселей или более, количество столбцов изменяется от 1 до 2. Область рекламы затем занимает левый столбец полностью.</p></section>

Use Media Queries to Create Responsive Layouts

<section id="description">
<p>Включение элемента в сетку влияет только на поведение его прямых потомков. Поэтому, превратив прямого потомка в сетку, у вас есть сетка внутри сетки. Например, задав свойства <code>display</code> и <code>grid-template-columns</code> элемента с классом <code>item3</code> , вы создаете сетку в своей сетке.</p></section>