Легкая и отзывчивая современная компоновка сетки CSS — SitePoint

Это скриншот страницы на этом этапе:

тело {   фон: # 12458c;   margin: 0rem;   padding: 0px;   font-family: -apple-system, BlinkMacSystemFont,             «Segoe UI», «Roboto», «Oxygen», «Ubuntu», «Cantarell»,             «Fira Sans», «Droid Sans», «Helvetica Neue»,             без засечек; } header {   text-transform: верхний регистр;   padding-top: 1px;   padding-bottom: 1px;   цвет: #fff;   border-style: solid;   border-width: 2px; } в стороне {   цвет: #fff;   границы ширина: 2px;   border-style: solid;   плыть налево;   ширина: 6,3 мм; } footer {   цвет: #fff;   границы ширина: 2px;   border-style: solid;   ясно: оба; } главный {   float: right;   ширина: calc (100% - 7,2 мкм);   padding: 5px;   фон: hsl (240, 100%, 50%); } главная> статья {   фон: hsl (240, 100%, 50%);   background-image: url ('https://source.unsplash.com/daily');   цвет: hsl (240, 0%, 100%);   border-width: 5px; }

Это небольшая демонстрационная страница, поэтому мы будем создавать теги напрямую, чтобы облегчить читаемость, а не применять системы именования классов.

Мы используем поплавки, чтобы расположить боковую панель слева, а главную часть - вправо, и мы установили ширину боковой панели на фиксированную ширину 6.3rem . Затем мы вычисляем и устанавливаем оставшуюся ширину для основного раздела с помощью функции CSS calc () . Основной раздел содержит галерею предметов, организованных как вертикальные блоки.

Прогрессивное улучшение: вам не нужно переоценивать все

При добавлении макета CSS Grid поверх вашего резервного макета вам фактически не нужно переопределять все теги или использовать полностью отдельные стили CSS:

• В браузере, который не поддерживает CSS Grid, свойства сетки, которые вы добавляете, будут просто проигнорированы.
• Если вы используете поплавки для выкладки элементов, имейте в виду, что элемент сетки имеет приоритет над float. То есть, если вы добавите стиль float: left | right к элементу, который также является элементом сетки (дочерний элемент родительского элемента, который имеет экран : сетка ), float будет проигнорирован в пользу сетки.
• Специфическая поддержка функций может быть проверена в CSS с использованием правил @supports . Это позволяет нам переопределять стили резервного копирования, когда это необходимо, в то время как старые браузеры игнорируют блок @supports .

Теперь добавим CSS Grid на нашу страницу. Сначала сделаем контейнер сетки и зададим столбцы, строки и области сетки:

  тело {
  /*...*/
  отображение: сетка;
  сетчатый зазор: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: заголовок заголовка
                       «Содержимое боковой панели»
                       «нижний колонтитул»;
}
 

Мы используем свойство : свойство сетки чтобы отметить как контейнер сетки. Мы установили щель сетки 0,1vw . Пробелы позволяют создавать водосточные желоба между ячейками сетки вместо использования полей.

Мы также используем grid-template-columns чтобы добавить два столбца. Первая колонка занимает фиксированную ширину, которая равна 6.5rem а вторая колонка занимает оставшуюся ширину. fr является дробной единицей, а 1fr равно одной части доступного пространства.

Затем мы используем grid-template-rows чтобы добавить три строки. Первый ряд занимает фиксированную высоту, равную 6rem третий ряд занимает фиксированную высоту 3rem а оставшееся свободное пространство ( 1fr ) присваивается второй ряд.

Затем мы используем grid-template-areas чтобы назначить виртуальные ячейки, полученные из пересечения столбцов и строк, в области. Теперь нам нужно определить те области, которые указаны в шаблоне областей, используя сетку-область :

  header {
  grid-area: header;
  /*...*/
}
в стороне {
  площадь сетки: боковая панель;
  /*...*/
}
footer {
  grid-area: нижний колонтитул;
  /*...*/
}
главный {
  grid-area: контент;
  /*...*/
}
 

Большая часть нашего резервного кода не имеет никаких побочных эффектов для CSS-сетки, за исключением ширины основного раздела width: calc (100% - 7.2rem); который вычисляет оставшуюся ширину для основной раздел после вычитания ширины боковой панели плюс любые поля пробела / пробела.

Это скриншот результата. Обратите внимание, что основная область не занимает полную оставшуюся ширину:

@supports (display: grid) {   главный {     ширина: авто;   } }

Это снимок экрана:

Добавление вложенной сетки

Ребенок-грид может быть контейнером Grid. Давайте сделаем основной раздел контейнером Grid:

  main {
  /*...*/
  отображение: сетка;
  сетчатый зазор: 0.1vw;
  grid-template-columns: repeat (автозаполнение, minmax (12rem, 1fr));
  grid-template-rows: repeat (автозаполнение, minmax (12rem, 1fr));
}
 

Мы используем сетчатый зазор 0.1vw и мы определяем столбцы и строки с использованием повтора (автозаполнение, minmax (12rem, 1fr)), . Параметр автозаполнения пытается заполнить доступное пространство с максимально возможным количеством столбцов или строк, при необходимости создавая неявные столбцы или строки. Если вы хотите поместить доступные столбцы или строки в свободное место, вам необходимо использовать автоподбор . Прочтите хорошее объяснение различий между автозаполнением и автоподгонка .

Это снимок экрана:

Использование сетки сетки-столбца сетки-строки и span Ключевые слова

CSS Grid предоставляет grid-column и сетку-строку которые позволяют размещать элементы сетки внутри их родительской сетки с использованием линий сетки. Они являются сокращенными для следующих свойств:

• grid-row-start : указывает начальную позицию элемента сетки в строке сетки
• grid-row-end : указывает конечную позицию элемента сетки в строке сетки
• grid-column-start : указывает начальную позицию элемента сетки в столбце сетки
• grid-column-end : указывает конечное положение элемента сетки в столбце сетки.

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

Давайте сделаем второй дочерний элемент основной области четырьмя столбцами и двумя строками и поместите его из строки строки строки и строки строки 1 (которая также является местом по умолчанию):

  Основная статья: nth-child (2) {
  grid-column: 2 / span 4;
  row-row: 1 / span 2;
}
 

Это снимок экрана:

Использование утилиты выравнивания сетки

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

.

CSS Grid предоставляет шесть свойств justify-items align-items justify-content align-content ] justify-self и align-self которые могут использоваться для выравнивания и выравнивания элементов сетки. Они фактически являются частью модуля выравнивания полей CSS.

Внутри заголовка, в стороне, селектора статей и нижних колонтитулов добавляют следующее:

  дисплей: сетка;
align-items: center;
justify-items: center;
 

• justify-items используется для выравнивания элементов сетки вдоль оси строки или по горизонтали.
• Элементы выравнивания выравнивают элементы сетки вдоль оси столбца или вертикально. Они могут взять начало конец центр и растянуть .

Это снимки экрана после центрирующих элементов:

Реструктуризация сетки в малых устройствах

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

Это снимок экрана перед добавлением кода для перестройки структуры на небольших устройствах:

@media all и (max-width: 575px) {   body {     grid-template-rows: 6rem 1fr 5.5rem 5.5rem;     grid-template-columns: 1fr;     Сетка-шаблон-направления:       «Заголовок»       «Содержание»       «Врезка»       «Сноска»;     } }

На устройствах с <= 575px мы используем четыре ряда с 6rem 1fr 5.5rem и 5.5 rem соответственно, и один столбец, который занимает все свободное пространство. Мы также переопределяем области сетки, поэтому боковая панель может занимать третью строку после основной области содержимого на небольших устройствах:

@supports (display: grid) {   главный, в сторону {     ширина: авто;   } }

Это скриншот финального результата:

Заключение

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

      

        

          
             Ахмед - веб-предприниматель, разработчик, цифровой маркетолог и блоггер. Он пишет о разработке программного обеспечения и веб-сайтов, советов по созданию денег, SEO и многом другом. Вы можете узнать больше о его написании на его веб-сайте.