| Kosten | Среда, 14 Февраля 2018, 22:42 | Сообщение 1 |
| Сетки 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 в разных компонентах пользовательского интерфейса.
Демонстрация:
| | Страна: (RU) |
| |
| Kosten | Среда, 14 Февраля 2018, 23:19 | Сообщение 2 |
|
| Следующие примеры включают образ того, как пример должен выглядеть в поддерживающем браузере, каждый из них ссылается на страницу с дополнительной информацией о отображаемой технике, коде и 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%;
}
Линейное размещение
Используя сетку в определенном примере, где используются элементы в разметке "шесть разделов с классом ящиков и классов" используя свойства размещения на основе строки.
Демонстрация:
| | Страна: (RU) |
| |
