Верстаем в сетке

Введение

CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная
система, которая может обрабатывать как столбцы так и строки, в отличии от Flexbox, который в значительной
степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила к родительским
элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid
элементами).

Контейнер сетки

Элемент к которому применяется display: grid. Это прямой родитель для всех
элементов сетки. В этом примере grid-container является контейнером.

Элемент сетки

Дочерние элементы (прямы потомки) контейнера. На примере выше item это
элемент сетки.

Линия сетки (Grid Line)

Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными (линии колонок) или
горизонтальными (линии строк) и располагаться по обе стороны от строки или столбца. На изображении синяя
линия является примером вертикальной линии (линией колонки).

Трек сетки (Grid Track)

Пространство между двумя соседними линиями. Трек можно представить как строку (колонка) или столбец
(ряд). Вот трек между второй и третей линией строк.

Ячейка сетки (Grid Cell)

Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная единица измерения
сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3.

Область сетки (Grid Area)

Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек. Вот
пример области между строками 1 и 3 и колонками 1 и 3.

Как устроен grid контейнер

Group Changes

Similar to adding and removing columns, you can also add and remove column groups. If the column definitions passed in have column groups, then the columns will grouped to the new configuration.

The example below shows adding and removing groups to columns. Note the following:

• Select No Groups to show all columns without any grouping.
• Select Participant in Group to show all participant columns only in a group.
• Select Medals in Group to show all medal columns only in a group.
• Select Participant and Medals in Group to show participant and medal columns in groups.
• As groups are added and removed, note that the state of the individual columns is preserved. To observe this, try moving, resizing, sorting, filtering etc and then add and remove groups, all the changed state will be preserved.

The example above shows adding and removing groups. It is also possible to add and remove columns from groups. This is demonstrated in the example below. Note the following:

• The example has two groups: Athlete Details and Sports Results
• The example has two sets of columns, Normal Cols and Extra Cols.
• When you moved from Normal Cols to Extra Cols, three new columns are added to the list. Two belong to the Athlete Details group, the other belongs to no group.
• When a column is added to the grid that is not in a group, it is always added to the end of the list of columns. In this example the Distance column is always added to the end.
• When a column is added to the grid that is part of a group, it is always added after the last column belonging to that group. In this example columns Region1 and Region2 are always added after either Athlete or Country, whichever appears last in the grid.

Значения¶

Значение по-умолчанию:

Применяется к grid-контейнерам

Контейнер не определяет именованные области макета сетки. Значение по умолчанию.

Точка означает пустую ячейку сетки макета.

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

Устанавливает свойство в значение по умолчанию.

Указывает, что значение наследуется от родительского элемента.

Основные принципы

Анонимные элементы сетки (Anonymous grid items). Если поместить текст напрямую в контейнер сетки, без обёртывания в какой-либо тег, то он превратится в анонимный элемент сетки. К таким элементам нельзя применять стили, но при этом они наследуют правила стилей от родительских контейнеров

Обратите внимание, что white space внутри контейнера сетки не приводит к созданию анонимного элемента.

Значение сеточного интервала (Value of grid spans). В отличие от позиционирования в сетке, алгоритм не содержит отдельных правил определения значения интервала в сетке

Если значение не задано, то по умолчанию оно равно 1 (элемент занимает только свою ячейку).

Неявная сетка (Implicit grid). Сетка, построенная на основе значений свойств , и , называется явной сеткой (explicit grid). Если теперь определить позицию элемента так, чтобы он находился вне границ явной сетки, то браузер сгенерирует дополнительные строки сетки, которые будут захватывать этот элемент. Эти строки в совокупности с явной сеткой формируют неявную сетку. Подробнее об этом можно почитать в “Where Things Are at in the CSS Grid Layout Working Draft”. Алгоритм авторазмещения также может стать причиной появления дополнительных столбцов или рядов в неявной сетке.

Размещение элементов с помощью настройки row-позиции, а не columnРазмещение элементов с помощью настройки column-позиции, а не row

Явный и неявный Grid

В предыдущем разделе мы явно задали, что Grid должен иметь шесть ячеек, образованных тремя столбцами и двумя строками. Это называется явным Grid.

У контейнера есть только пять дочерних элементов. Оставшиеся позиции пусты. Что произойдет, когда мы добавим больше дочерних элементов в контейнер.

Когда количество grid-элементов превысит количество явно определенных ячеек, оставшиеся элементы cформируют неявный Grid.

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

Размер элементов неявного Grid по умолчанию устанавливается как . Элементы сетки будут расширяться, чтобы разместить свое содержимое. Если мы установим контейнера в 50, то высота трека явного Grid расшириться до 30.

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

Если мы добавим достаточно элементов, чтобы создать четвертую строку, высота ячеек неявного Grid будет равномерной на все 30 вертикального пространства контейнера. Их расчетная высота будет по 15.

Высота строк неявного Grid будет равномерна.

В первоначальном примере мы определили только две строки, каждая высотой 10. Поэтому размеры третьей строки по умолчанию устанавливается как . Ее высота будет подогнана к размеру содержимого и отступам.

Определение grid-макета

После определения -контейнера необходимо указать браузеру, сколько строк и столбцов должно содержаться в сетке. Для этого используются свойства и . Они применяются к -контейнеру.

Вы можете использовать различные единицы измерения, проценты, значения ,  и .

.grid {
    display: grid;
    grid-template-columns: 25rem 25rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Мы определили grid с тремя столбцами (каждый шириной 25rem) и двумя строками высотой 10rem. Разметка, которая нам потребуется:

<div class="grid">
    <div>Grid item A</div>
    <div>Grid item B</div>
    <div>Grid item C</div>
    <div>Grid item D</div>
    <div>Grid item E</div>
</div>

Наши  grid-элементы организованы в столбцы и строки, как показано ниже.

Создание сетки с помощью и 

Давайте изменим значение на 25 15 25:

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
}

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

Столбцы и строки сетки не обязательно должны быть одинаковой ширины.

Испытание 3. Выравнивание компонентов шапки

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

Решение на Flexbox

Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри <nav> по горизонтали. Проще это сделать с помощью display: inline-block, но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:

Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.

Решение на CSS Grid

Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.

Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:

Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline, как у align-items. Мы также должны определить ещё одну вложенную сетку.

Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов

align-content

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

Наследуется: нет.

Применяется к: block контейнерам, flex контейнерам и grid контейнерам.

Значение по умолчанию: normal.

start

выравнивает сетку по верхней части контейнера.

end

выравнивает сетку по нижней части контейнера.

center

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

space-around

одинаковое пространство между элементами, и полуразмерные отступы по краям.

space-between

одинаковое пространство между элементами, без отступов по краям.

space-evenly

одинаковое пространство между элементами, и полноразмерные отступы по краям.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Прототипирование и области макета с CSS Grid

Есть у этого же автора и вторая статья по теме, видимо, активно продвигает свой бесплатный курс:) Для пояснения используется сетка такого вида:

Код разметки при этом следующий (HTML):

<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

В стилях CCS будет:

.container {
    display grid;    
    grid-template-columns repeat(12, 1fr);
    grid-template-rows 50px 350px 50px;
    grid-gap 5px;
}

Если по строкам все, в принципе, понятно, то с колонками нужно прояснить. Здесь в значении grid-template-columns создается сетка, что состоит из 12ти одинаковых колонок (ширина каждой = 1/12 от общей) + отступы между ними в 5px (grid-gap).

Добавляем grid-template-areas

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

.container {
    display grid;
    grid-gap 5px;    
    grid-template-columns repeat(12, 1fr);
    grid-template-rows 50px 350px 50px;
    grid-template-areas
        "h h h h h h h h h h h h h"
        "m m c c c c c c c c c c c"
        "f f f f f f f f f f f f f";
}

Это своего рода визуальное представление вашей сетки сайта в CSS. Все символы в данном параметре формируют 3 строки и 12 колонок, определенные строкой выше. Каждая буква отвечает за одну ячейку. Названия в примере соответствуют блокам HTML кода: header (h), menu (m), content (c) и footer (f), но можете использовать любые другие варианты.

Присвоение областей шаблоны и эксперименты

На следующем шаге вы «логически связываете» символы контейнера и элементы DIV:

.header {
    grid-area h;
}
.menu {
    grid-area m;
}
.content {
    grid-area c;
}
.footer {
   grid-area f;
}

На сайте отобразится макет вида:

А теперь начинается магия. Давайте поменяем местами некоторые буквы в параметре grid-template-areas, например «c» и «m» местами:

grid-template-areas
        "h h h h h h h h h h h h h"
        "c c c c c c c c c c c m m"
        "f f f f f f f f f f f f f";

Сетка будет выглядеть по другому:

Добавление адаптивности в эту конструкцию вообще выглядит потрясающе. С помощью одного HTML вы бы такое не реализовали, а вот в CSS все возможно.

@media screen and (max-width 640px) {
    .container {
        grid-template-areas
            "m m m m m m h h h h h h"
            "c c c c c c c c c c c c"
            "f f f f f f f f f f f f";
    }
}

Если использовать точки по краям, то в шаблоне появятся пустые области.

grid-template-areas
        ". h h h h h h h h h h ."
        "c c c c c c c c c c m m"
        ". f f f f f f f f f f .";

На сайте выглядит так:

Никаких скриптов и HTML — только магия CSS Grid! 

Размеры содержимого сетки

При созда­нии сет­ки мож­но исполь­зо­вать раз­ные еди­ни­цы раз­мер­но­сти, сме­ши­вая их друг с дру­гом. Напри­мер, мож­но ука­зать, что в сет­ке будет три столб­ца — пер­вый шири­ной 100 пик­се­лей, вто­рой будет раз­ме­ром с поло­ви­ну шири­ны экра­на, а тре­тий пусть зани­ма­ет всё остав­ше­е­ся место:

grid-template-columns: 100px 50vw 1fr;

Пик­се­ли: ука­зы­ва­ем нуж­ный нам раз­мер или поль­зу­ем­ся функ­ци­ей minmax(), кото­рая зада­ёт мини­маль­ный и мак­си­маль­ный раз­мер дорожки.

Отно­си­тель­ные вели­чи­ны: Если шири­на или высо­та у нас зави­сят от раз­ме­ров окна бра­у­зе­ра, то мож­но исполь­зо­вать отно­си­тель­ную вели­чи­ну vh (высо­та окна) или vw (шири­на окна):

100vh — вся высо­та окна,

33vh — треть высоты,

50vw — поло­ви­на шири­ны окна браузера.

Для про­сто­ты мож­но пред­ста­вить, что чис­ла перед vh и vw — это про­цен­ты. 100 — это сто про­цен­тов, вся види­мая часть, 50 — это поло­ви­на и так далее. Мож­но ука­зать боль­ше 100, тогда содер­жи­мое уедет за гра­ни­цы окна и нуж­но будет исполь­зо­вать про­крут­ку вниз или вбок.

FR рабо­та­ет так:

• созда­ёт дорож­ки с нуж­ны­ми пропорциями;
• или раз­ре­ша­ет зани­мать одной дорож­ке всю сво­бод­ную область окна браузера.

Напри­мер: 

grid-template-columns: 1fr 1fr 1fr 1fr; — 4 колон­ки оди­на­ко­вой ширины;

grid-template-columns: 1fr 1fr 1fr 3fr; — послед­няя колон­ка будет шире осталь­ных в три раза.

Если нам нуж­но что-то рас­тя­нуть на всё сво­бод­ное место, мы можем ука­зать раз­ме­ры осталь­ных эле­мен­тов, а там, где нуж­но рас­тя­нуть, напи­шем 1fr:

grid-template-columns: 100px 1fr 100px;

Этот код сде­ла­ет нам три колон­ки — пер­вая и тре­тья шири­ной 100 пик­се­лей, а вто­рая (цен­траль­ная) зай­мёт всё осталь­ное место. Если раз­мер окна изме­нит­ся, то боко­вые колон­ки оста­нут­ся по 100 пик­се­лей, а цен­траль­ная перестроится. 

Значения свойства

Как исправить проблему

Решение состоит в том, что нам нужно установить минимальный фиксированный размер вместо автоматического. Мы можем сделать это с помощью функции minmax().

Проблема решена. Но кроме этого, мы так же можем решить её и на уровне элемента грида. Вот CSS-правила, которые мы можем применить к элементу .main:

1. Установить min-width: 0;

2. Или, задать overflow: hidden;

В зависимости от контекста вы можете использовать одно из двух вышеперечисленных правил. Однако у них могут быть некоторые побочные эффекты, особенно у overflow: hidden.

Представьте, что у дочернего элемента основного раздела есть декоративный псевдоэлемент, расположенный за пределами основных границ. В таком случае применение overflow: hidden обрежет этот псевдоэлемент.

На рисунке выше у нас есть два элемента, которые расположены за пределами основного раздела (кнопка «Поделиться» слева и декоративная форма внизу справа).

Учитывайте это, при выборе решения, которое лучше всего подходит для вашего сценария.

Ахмад Шадид, Минимальный размер содержимого в CSS Grid, 21 Января 2021(Ahmad Shadeed, The Minimum Content Size In CSS Grid, Jan 27, 2021)

Свойство grid-template-columns

Теперь добавим колонки.

Ширину мы можем указывать в любых CSS единицах длины, в процентах и в единицах fr.

fr (от fraction — часть) это новая форма единицы измерения созданная для гридов, которая позволяет добавлять столько колонок, сколько мы захотим, не заботясь о конкретном значении ширины колонки. Свободное место распределяется между такими колонками пропорционально количеству fr.

— такая запись означает, что мы создаем 3 колонки одинаковой ширины.

Немного математики:

Ширина грида равна 400px. Если мы зададим для следующие значения: , то ширина всех колонок будет равна 1.5fr + 2fr + 1fr= 4.5fr.

Теперь вычислим ширину каждой колонки. Первая колонка будет иметь ширину 1.5fr / 4.5fr * 400px. Что в итоге равно 133px. Соответственно рассчитаем остальные значения.

Вторая колонка 2fr / 4.5fr * 400px = 178px, третья колонка 1fr / 4.5fr * 400px = 89px. Т.е. мы могли задать колонки таким образом:

В сумме общая ширина равна 400px.

В этом случае, если мы захотим добавить еще одну колонку либо наоборот убрать, нам придется пересчитать и заменить все значения вручную. С единицей измерения fr все пересчитается автоматически.

Заполнение блоков по очереди

Самый про­стой спо­соб доба­вить что-то в сет­ку — про­пи­сать в бло­ке <div>, что нам нуж­но. Напри­мер, можем запол­нить часть нашей сет­ки тек­стом, а часть — картинками:

Код страницы

Что­бы кар­тин­ки у нас под­го­ня­лись точ­но под раз­мер сет­ки, мы исполь­зо­ва­ли свой­ство object-fit: cover — оно уве­ли­чи­ва­ет или умень­ша­ет раз­мер кар­тин­ки так, что­бы она под­го­ня­лась под нуж­ное место.

Ещё мы доба­ви­ли отдель­ный стиль для абза­цев с тек­стом и сде­ла­ли в нём отсту­пы сле­ва и спра­ва, что­бы текст не при­ли­пал к гра­ни­цам яче­ек. Там, где мы не исполь­зо­ва­ли тег <p> (эле­мен­ты 4,5,6 и 10), текст при­жал­ся к кра­ям и выгля­дит неопрятно.

Свойство align-items

Свойство выравнивает содержимое внутри grid-элемента вдоль оси столбца. Применяется ко всем grid-элементам контейнера.

Доступные значения:

• (значение по умолчанию) — содержимое заполняет всю высоту grid-области;
• — содержимое прижимается к верхнему краю grid-области;
• — содержимое прижимается к нижнему краю grid-области;
• — содержимое выравнивается по центру grid-области.

.grid-container {
    align-items: stretch;
}

.grid-container {
    align-items: start;
}

.grid-container {
    align-items: end;
}

.grid-container {
    align-items: center;
}

Также можно задать выравнивание по оси столбца для отдельных элементов сетки, используя (будет рассмотрено в следующем уроке).

Свойство grid

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

Также свойство устанавливает исходные значения для свойств и , даже если они не заданы явно в данном свойстве.

Значения:

• — устанавливает значения по умолчанию для всех свойств;
• <grid-template-rows> / <grid-template-columns> — устанавливает указанные значения для свойств и соответственно, а также задает значения по умолчанию для других свойств;
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] — устанавливает указанные значения для свойств , и соответственно. Если значение для свойства не задано, то ему задается значение, установленное для . Если значения не заданы для обоих свойств, устанавливаются значения по умолчанию.

Схема:

.grid-container {
    grid: none
          или <grid-template-rows> / <grid-template-columns>
          или <grid-auto-flow> [<grid-auto-rows> ];
}

Пример

Следующие блоки CSS-кода идентичны по своему действию:

.grid-container {
  grid-template-rows: 150px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

/* код выше эквивалентен коду ниже */

.grid-container {
  grid: 150px auto / 1fr auto 1fr;
}

Следующая пара также эквивалентна:

.grid-container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

/* код выше эквивалентен коду ниже */

.grid-container {
  grid: column 1fr / auto;
}

Свойство также понимает более сложный, но удобный синтаксис для установки всех параметров сразу. Вы определяете свойства , и , а для всех остальных свойств устанавливаются их значения по умолчанию. Иными словами, вы определяете имена grid-линий, размеры grid-путей и шаблон сетки. Это проще описать на примере:

.grid-container {
    grid-template-areas: "header header header"
                         "footer footer footer";
    grid-template-rows:  1fr  30px ;
    grid-template-columns: auto 65px auto;    
}

/* код выше эквивалентен коду ниже */

.grid-container {
    grid:  "header header header" 1fr 
           "footer footer footer" 30px 
          / auto 65px auto;
}

Далее в учебнике: свойства для grid-элементов.

Разреженное размещение на этапе #5

разреженном режиме

• Алгоритм инкрементирует column-позицию курсора до тех пор:
  а) пока не возникнет наложения между текущим элементом и ранее размещёнными,
  б) либо пока сумма «значение column-позиции курсора + значение column-интервала элемента» не превысит количество столбцов неявной сетки.
• Если алгоритм находит позицию без наложений, то присваивает позиции курсора значения и вставляемого элемента. В противном случае алгоритм увеличивает на 1, присваивает значение начальной строки в неявной сетке, и повторяет предыдущий шаг.

• Значение column-позиции курсора присваивается значению строки элемента. Если значение новой позиции получается меньше, чем предыдущая column-позиция курсора, то row-позиция увеличивается на 1.
• Далее row-позиция увеличивается на 1 до тех пор, пока не будет достигнуто значение, при котором элемент не накладывается ни на одну из уже занятых ячеек. При необходимости в неявную сетку могут добавляться дополнительные ряды. Теперь значение начальной строки ряда элемента присваивается row-позиции курсора, а конечная строка ряда элемента задаётся в соответствии с его интервалом.

Для чего нужен Grid

Допу­стим, у нас сто­ит зада­ча рас­по­ло­жить эле­мен­ты на стра­ни­це в опре­де­лён­ных местах. Например:

• шап­ку сай­та поста­вить на самый верх, что­бы она зани­ма­ла не боль­ше 100 пикселей;
• в этой шап­ке преду­смот­реть отдель­ное место, куда мож­но поста­вить инфор­ма­цию о поль­зо­ва­те­ле, когда он вве­дёт свои логин и пароль;
• основ­ное содер­жи­мое тоже долж­но состо­ять из трёх частей — лево­го меню, ста­тьи и пра­во­го бло­ка с рекламой;
• пра­вый блок с рекла­мой дол­жен зани­мать от 200 до 150 пикселей;
• содер­жи­мое ста­тьи пусть зани­ма­ет всё сво­бод­ное про­стран­ство, но с отсту­пом 20 пик­се­лей от каж­до­го края блока;
• ещё блок со ста­тьёй не может быть в шири­ну мень­ше чем 500 пик­се­лей, боль­ше — можно;
• вни­зу дол­жен быть блок на всю шири­ну с кон­такт­ной информацией.

Это мож­но сде­лать несколь­ки­ми способами.

Под­клю­чить Bootstrap и завер­стать всё на нём. Мы сра­зу полу­ча­ем адап­тив­ность и раз­бив­ку по бло­кам, но задать нуж­ные раз­ме­ры будет слож­но. Бут­страп хорош, когда нуж­но быст­ро сде­лать что-то адап­тив­ное без силь­ных тре­бо­ва­ний к пик­се­лям и раз­ме­рам. Он счи­та­ет все раз­ме­ры сам и не осо­бо даёт в это вмешаться. 

Исполь­зо­вать таб­ли­цы <table>. Про­ве­рен­ный и рабо­чий спо­соб создать что-то желе­зо­бе­тон­но надёж­ное, но не очень гиб­кое. Минус таб­лиц — мно­го вло­жен­ных тегов и слож­ная рабо­та с груп­пи­ров­кой яче­ек. Так дела­ли сай­ты в девя­но­стых и нулевых. 

При­ме­нить grid. Наш выбор на сего­дня. Grid, как и бут­страп, мож­но сде­лать адап­тив­ным, а рабо­та с ячей­ка­ми и обла­стя­ми в нём намно­го удоб­нее, чем в таб­ли­цах. Но и син­так­сис не такой интуитивный. 

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

justify-content

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца)

Наследуется: нет.

Применяется к: block контейнерам, flex контейнерам и grid контейнерам.

Значение по умолчанию: normal.

start

выравнивает сетку по левой стороне контейнера.

end

выравнивает сетку по правой стороне контейнера.

center

выравнивает сетку по центру контейнера.

stretch

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

space-around

одинаковое пространство между элементами, и полуразмерные отступы по краям.

space-between

одинаковое пространство между элементами, без отступов по краям.

space-evenly

одинаковое пространство между элементами, и полноразмерные отступы по краям.

Определение размера элементов неявного Grid

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

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: 30rem;
}

Теперь высота элементов третьей и последующих строк будет составлять 30.

Использование grid-auto-rows для определения высоты элементов сетки

Есть один недостаток при использовании свойств . Если содержимое grid-элемента превышает его размер, оно переполняет контейнер и может визуально обрезаться элементами других строк.

Содержимое grid-контейнера может переполнять контейнер при значении длины, выраженной в единицах измерения или процентах.

Единственный способ избежать подобного – это использовать функцию minmax(). Добавим ее в наш CSS:

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: minmax(30rem, auto);
}

Функцию minmax() позволяет нам определить минимальный и максимальный размер трека (строк и колонок).

В данном случае высота ряда будет составлять не менее 30. Но мы установили максимальный размер на auto, поэтому трек будет расширяться, чтобы вместить содержимое ячейки.

Функции minmax() может принимать длину в единицах измерения или процентах. А также одно из ключевых слов  ,  и . При minmax(30) мы получили бы такой же эффект.

Если ширина grid-контейнера составляет 70, grid-template-columns;, то заполнится только 90% его горизонтального пространства. Но  если ширина grid-контейнера всего  , то общая ширина столбцов будет выходить за его границы.

Единственный способ избежать такой ситуации – использовать единицы гибкости.