Как создать идеальную сетку CSS на своем веб-сайте [Примеры макетов]

, а количество столбцов внутри строки всегда составляет 12:

Затем вы должны убедиться, что вы очистили float, убедившись, что все столбцы внутри строки находятся в потоке страницы:

Источник изображения

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

Если это кажется слишком большим трудом, возможно, вы захотите построить с помощью внешней среды разработки, такой как Bootstrap CSS. Вы можете использовать встроенную систему сеток Bootstrap, поэтому вам не придется создавать сетки с нуля. Таким образом, вы можете сосредоточиться на содержимом сетки, а не на самой сетке.

Узнайте больше о разнице между CSS Grid, Bootstrap и Flexbox.

Примеры макетов CSS Grid

Теперь, когда мы рассмотрели основы CSS-сетки, давайте рассмотрим основные примеры макета CSS-сетки. Некоторые из приведенных ниже примеров сделаны веб-дизайнером Рэйчел Эндрю и процитированы соответственно.

Схема размещения на основе линий

При создании сеток CSS элементы обычно размещаются в сетке на основе строк столбцов и строк. Пример ниже представляет собой простую сетку с тремя столбцами и двумя строками. Он содержит шесть элементов, ни один из которых не охватывает несколько дорожек сетки. 

Вот HTML-код, определяющий сетку. Обратите внимание, что каждый элемент сетки имеет собственное имя класса. Это позволит вам использовать селекторы классов для применения уникального стиля к каждому элементу сетки в вашем CSS. 

Источник изображения

Ниже приведен CSS, определяющий размещение шести элементов сетки. Обратите внимание, что существует шесть наборов правил, которые определяют свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end с номерами строк для каждого элемента сетки.

Источник изображения

Вот результат на передней панели:

Источник изображения

Использование сокращенных свойств Grid-Row и Grid-Column

Мы можем создать тот же макет сетки, что и выше, используя сокращенные свойства grid-column и grid-row.

Эти сокращенные свойства могут сэкономить ваше время и сделать ваш код более чистым. Вместо того, чтобы записывать свойства grid-column-start и grid-column-end на двух отдельных строках, вы можете объединить их в одну строку под сокращением grid-column. Чтобы определить это сокращенное свойство, сделайте первое число строкой столбца, где начинается элемент сетки, а второе число представляет строку столбца, где элемент сетки заканчивается. Разделяйте значения косой чертой.

Вы можете сделать то же самое для сокращенного свойства grid-row.  

Вот тот же CSS из приведенного выше примера, переписанный с использованием сокращенных свойств grid-column и grid-row:

Источник изображения

HTML останется прежним, и сетка будет выглядеть так же во внешнем интерфейсе. 

Использование сокращенного свойства Grid-Area

Мы также можем создать такой же макет сетки, используя сокращенное свойство grid-area.

Это сокращенное свойство может сэкономить вам еще больше времени, требуя меньше кода. Просто порядок значений свойств запомнить немного сложнее. 

Для каждого из шести наборов правил все, что вам нужно сделать, это определить свойство grid-area с четырьмя значениями. Порядок значений: строка строки, где начинается элемент сетки / строка столбца, где начинается элемент сетки / строка строки, где заканчивается элемент сетки / линия столбца, где заканчивается элемент сетки.

Вот тот же CSS из приведенного выше примера, переписанный с использованием сокращенного свойства grid-area:

Источник изображения

HTML останется прежним, и сетка будет выглядеть так же во внешнем интерфейсе. 

Использование имен столбцов и строк

В дополнение к использованию номеров строк у вас также есть возможность дать имена линиям сетки и использовать их вместо них.

Это потребует от вас изменения CSS, определяющего сетку в целом, и CSS, определяющего размещение шести элементов сетки. Во-первых, под селектором классов .wrapper вы найдете свойства grid-template-columns и grid-template-rows. В предыдущих примерах только свойство grid-template-columns было определено со значением 100 пикселей трижды. Это означает, что каждый столбец имел одинаковую ширину 100 пикселей. Вот как это выглядело в CSS:

Источник изображения

В этом примере нам нужно определить свойства grid-template-columns и grid-template-rows с именами и значениями строк. Каждый столбец будет называться «col1-start», «col2-start» и «col3-start» соответственно и установлен на 100 пикселей. Каждая строка будет называться «row1-start» и «row2-start» соответственно и установлена ​​в «auto». Вот CSS:

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px;
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
    background-color: #fff;
    color: #444;
}

Теперь вот тот же раздел CSS из приведенного выше примера, переписанный с использованием сокращенных свойств и имен линий сетки.

    .a {
        grid-column: col2-start;
        grid-row: row1-start;
    }
    .b {
        grid-column: col2-start;
        grid-row: row2-start;
    }
    .c {
        grid-column: col3-start;
        grid-row: row2-start ;
    }
    .d {
        grid-column: col1-start ;
        grid-row: row1-start ;
    }
    .e {
        grid-column: col1-start ;
        grid-row: row2-start ;
    }
    .f {
        grid-column: col3-start ;
        grid-row: row1-start ;
    }

HTML останется прежним, и сетка будет выглядеть так же во внешнем интерфейсе. 

Макет размещения на основе линий, охватывающий более одной дорожки сетки

Теперь, когда мы понимаем различные способы написания кода для линейных макетов размещения, давайте рассмотрим более сложный пример: позиционирование элементов, охватывающих более одной дорожки сетки. Сетка ниже будет содержать только четыре элемента сетки. Один элемент будет занимать более столбца, а другой – более одной строки. 

Вот HTML-код, определяющий сетку. 

Источник изображения

Ниже приведен CSS, определяющий размещение четырех элементов сетки. Обратите внимание, что используются сокращенные свойства grid-column и grid-row, и что в большинстве экземпляров определено только одно значение. Это потому, что вам нужно только определить начальное и конечное значения для элементов сетки, которые вы хотите охватить несколькими дорожками.

Например, чтобы элемент сетки A занимал два столбца, вы можете определить сокращенное свойство сетки-столбца, присвоив первому значению «1», а второму значению «3». Чтобы элемент сетки B занимал две строки, вы можете определить сокращенное свойство grid-row, сделав первое значение равным «1», а второе значение – «3».

Источник изображения

Вот результат на передней панели:

Источник изображения

Использование ключевого слова Span

Мы можем создать такую ​​же сетку сверху, используя ключевое слово span. 

Вместо того, чтобы записывать конечное значение для сокращенных свойств grid-column и grid-row для двух элементов, охватывающих более одной дорожки сетки, вы должны написать «span» и включить количество столбцов или сеток, которые вы хотите, чтобы элемент охватывал . 

Вот тот же CSS из приведенного выше примера, переписанный с использованием ключевого слова span. Пункты A и B охватывают два столбца и две строки соответственно, поэтому конечным значением является "span 2". Обратите внимание, что многие свойства определяются только одним значением. В этом случае предполагается, что по умолчанию используется один столбец или строка.

Источник изображения

HTML останется прежним, и сетка будет выглядеть так же во внешнем интерфейсе. 

Макет Святого Грааля

Вы могли заметить, что многие веб-страницы имеют похожую структуру. Заголовок вверху, нижний колонтитул внизу и область содержимого между ними. Эта область содержимого расположена между двумя столбцами. Допустим, вы должны были посмотреть исходный код этих страниц. В идеале вы должны видеть сначала область содержимого, а затем две колонки. До использования CSS-сетки этого было сложно. С сеткой CSS это просто.

Ниже мы рассмотрим код и макет, который был придуман как «Макет Святого Грааля».

Вот HTML-код, определяющий заголовок, боковую панель навигации, основное содержимое (элемент

), правую боковую панель (элемент