Сегодня я собираюсь показать вам, как использовать нашу функцию сетки в CSS.
Я наткнулся на это, когда создавал проект для моего учебного курса по кодированию, и это было спасением. Контент меня и моего партнера изначально начинался с верхней части страницы и заканчивался внизу, и это определенно не так, как мы планировали. Возможность размещать контент на той части страницы, которая вам нужна, является необходимостью. Итак, после многих поисков в Google и ошибок, я рассказываю вам об основах сетки CSS. Основы означают только размещение контента и ничего более (есть еще много чего).
Вот как изначально была оформлена наша страница:
Это была наша страница после внедрения нашей сетки:
Намного лучше.
Первое, что мы собираемся сделать, это поместить «контейнер» вокруг элементов, которые мы хотим отобразить в виде сетки в нашем HTML, вот так.
Шаг 1: Настройка нашего HTML
<div class="grid-container">
<section id="one">
<div>1</div>
<div>2</div>
</section>
<section id="two">
<div>3</div>
<div>4</div>
</section>
<section id="three">
<div>5</div>
<div>6</div>
</section>
<section id="four">
<div>7</div>
<div>8</div>
</section>
<section id="five">
<div>9</div>
<div>10</div>
</section>
</div>
Выше показано, как выглядит наш контент в настоящее время.
Я также создал несколько тегов разделов и добавил их в разделы, которые мы хотим разделить. Я также добавил идентификаторы для каждого из них, указывающие, где на странице я хочу это сделать. Я сделал это для того, чтобы просто знать, где что размещать, когда мы настраиваем наш CSS.
Шаг 2: Настройка нашего CSS
Теперь, когда у нас есть HTML-настройка, ее можно стилизовать.
#grid-container {
display: grid;
}
Первое, что мы собираемся сделать, это выбрать наш идентификатор, который мы создали для нашего контейнера, и объявить наше свойство и значение как «display: grid;».
Свойство display выбирает, как именно будет отображаться наше содержимое. Здесь мы выбираем «сетку», которая немедленно сортирует наше содержимое в сетку. Существуют и другие варианты, такие как «встроенный», но для простоты мы рассмотрим только вариант «сетка».
Теперь все, что нам нужно сделать, это указать, где в сетке мы хотим это сделать. Прямо сейчас сетки не так много, но как только мы начнем указывать нашему CSS, куда она должна идти, он создаст сетку в соответствии с этим.
Строки и столбцы
Прежде чем мы начнем рассказывать нашему контенту, куда идти, мы должны узнать, как выглядит наша карта!
Сетка включает в себя две вещи: строки и столбцы.
Просто, верно? Эти столбцы и строки между серым цветом — это то, что мы собираемся использовать, чтобы указать, где мы хотим, чтобы наш контент начинался и заканчивался. Первая строка начинается полностью в верхней части страницы, а первый столбец начинается полностью в левой части страницы. Вы также можете создать столько строк или столбцов, сколько вам нужно. Мы поговорим об этом в ближайшее время.
Если мы настроим наш код так, чтобы он располагался в правом верхнем углу, он будет выглядеть так:
#one {
grid-column-start: 5;
grid-row-end: 1;
}
Глядя в браузере сейчас, ваш продукт должен выглядеть так:
Я выбрал наш идентификатор и использовал «grid-column-start» и «grid-row-end», чтобы поместить наш раздел один в пятый столбец и первую строку. Мы также можем создать столько строк или столбцов, сколько захотим, просто установив свойство «grid-column» на любое число.
Теперь, когда мы знаем, как настроить таргетинг на каждое место в сетке, мы можем приступить к стилю каждого идентификатора и присвоить ему «координаты».
.grid-container {
display: grid;
}
#one {
grid-column-start: 1;
grid-row-end: 1;
}
#two {
grid-column-start: 2;
grid-row-end: 1;
}
#three {
grid-column-start: 3;
grid-row-end: 1;
}
#four {
grid-column-start: 4;
grid-row-end: 1;
}
#five {
grid-column-start: 5;
grid-row-end: 1;
}
И это конечный продукт!
Вот несколько вещей, которые нужно устранить, если он выглядит не так, как должен:
Устранение неполадок
- Была ли сетка инициализирована путем настройки отображения на сетку?
- Есть ли пересекающиеся координаты?
- В каких значениях отсутствует точка с запятой?
- Какие-либо идентификаторы выбраны неправильно?
Сетка CSS изменила лицо моей веб-страницы, и я знаю, что она может сделать то же самое для вашей. Он прост в использовании и легок в освоении!
Спасибо за чтение моего блога.
