• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Создание сетки при помощи CSS Grid (Основные понятия использования CSS Grid в разработки сетки)
Создание сетки при помощи CSS Grid
Kosten
Дата: Среда, 14.02.2018, 22:42 | Сообщение 1
Администраторы
Сообщений:17016
Награды: 55


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

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

Справедливости ради, нужно отметить, что эта проблема была частично решена с помощью таких структур, как Bootstrap или Foundation. Но вам все равно нужно добавлять библиотеки, изучать тонкости и сужать принципы этих framework. Сетка CSS имеет много преимуществ по сравнению с этими структурами или библиотеками. Сетка CSS проста, легко подбирается и корректно отображается на браузерах.

CSS Grid будет перенесена на производство и будет поддерживаться по умолчанию в Firefox и Chrome в марте 2017 года. Если вы собираетесь прекратить чтение, поскольку вы были сожжены раньше, чем в первых выпусках с ошибкой, важно отметить, что Grid находится в разработке для 5 лет и имеет серьезные изменения. Они произошли за флажками браузера, поэтому не было никакого воздействия на пользователей.

В этой статье узнаете об элементах CSS Grid как можно использовать в создание элемента, а точнее саму основу.

Основная терминология

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

1. Сетка: Любой элемент со свойством отображения, установленным в сетку;
2. Строка: горизонтальные и вертикальные линии, которые определяют границы;
3. Ячейки: Пространство между 4 линиями сетки;
4. Треки: пространство между двумя параллельными линиями;
5. Gutter: Пространство между ячейками;
6. Область: область между 4 линиями сетки, это может иметь любое количество ячеек;

Для начала вам нужно создать родительский элемент с несколькими дочерними элементами.



HTML

Код
<div class="zornet-ru-lasrmin">
  <div class="gildusa blue">ZORNET.RU №1</div>
  <div class="gildusa yellow">ZORNET.RU №2</div>
  <div class="gildusa red">ZORNET.RU №3</div>
  <div class="gildusa blue">ZORNET.RU №4</div>
  <div class="gildusa blue">ZORNET.RU №5</div>
  <div class="gildusa yellow">ZORNET.RU №6</div>
</div>

В CSS вам нужно добавить display: grid к родительскому элементу, который идентифицирует наборы этого элемента в виде сетки. Вам необходимо установить сетки, шаблоны, столбцы и строки, так как они необходимы, чтобы определить столбцы и строки.

В этом примере будет два столбца, каждый из которых занимает 25% и 50% сетки и 3 строки, причем первая строка имеет высоту 9 пикселей, вторая строка с высотой 49 пикселей, а третья строка имеет высоту 99 пикселей.

Код
.zornet-ru-lasrmin {

display: grid;

grid-template-columns: 27% 49%;

grid-template-rows: 49px 49px 98px;

grid-gap: 8px;

}

.gildusa {

padding: 1em;

color: white;

text-align: center;

}

.yellow {

background-color: #28b931;

}

.blue {

background-color: #1a5175;

}

.red {

background-color: #79180e;

}

Теперь добавьте grid-column: 1 / span 2 в синий класс. Это означает, что он будет охватывать от первой линии до второй. Эта концепция также может применяться к строкам и может создавать очень подробные макеты. Обратите внимание, как поле 6 попадает в следующую строку.

Код
.blue {

background-color: #2a80b9;

grid-column: 1 / span 2;

}




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

Демонстрация:
Прикрепления: 9628198.png(10.6 Kb) · 4455510.png(9.8 Kb)
Страна: (RU)
Kosten
Дата: Среда, 14.02.2018, 23:19 | Сообщение 2
Администраторы
Сообщений:17016
Награды: 55


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

Все прямые дочерние элементы родителя теперь становятся элементами сетки, и алгоритм автоматического размещения выдает их, по одному в каждой ячейке сетки.



Создание дополнительных строк по мере необходимости.

HTML

Код
<div class="zotrsanum">
  <div class="kalivun z">Z</div>
  <div class="kalivun o">O</div>
  <div class="kalivun c">ZORNET.RU</div>
  <div class="kalivun n">N</div>
  <div class="kalivun e">E</div>
  <div class="kalivun f">ZORNET.RU</div>
</div>

CSS:

Код
.zotrsanum {
    display: grid;
    grid-template-columns: 95px 95px 195px;
    grid-gap: 10px;
    background-color: #fff;
    color: #163752;
}

.kalivun {
    background-color: #144f80;
    color: #e0f962;
    border-radius: 5px;
    padding: 15px;
    font-size: 148%;
}


Линейное размещение

Используя сетку в определенном примере, где используются элементы в разметке "шесть разделов с классом ящиков и классов" используя свойства размещения на основе строки.

Демонстрация:
Прикрепления: 9963040.png(8.3 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Создание сетки при помощи CSS Grid (Основные понятия использования CSS Grid в разработки сетки)
  • Страница 1 из 1
  • 1
Поиск: