Css свойство grid-area

Введение в CSS Grid

В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

  • родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
  • дочерние / items (сами элементы).

Вот простейшая конструкция:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Родительский объект — и есть реальная сетка, а все внутренние — ее наполнение. Чтобы внешний DIV начал действовать должным образом, нужно задать классу wrapper соответствующее значение grid:

.wrapper {
    display grid;
}

Однако сразу после этого ничего особо не поменяется, так как не определен формат отображения. Вы увидите 6 DIV’ов идущих друг после друга.

Колонки и строки

Чтобы сделать вашу сетку двумерной нужно указать параметры строк и колонок — используем опции grid-template-row и grid-template-colum соответственно:

.wrapper {
    display grid;
    grid-template-columns 100px 100px 100px;
    grid-template-rows 50px 50px;
}

Поскольку для колонок имеется три значения, то их будет генерироваться такое же число, следовательно, рядков — только 2. Цифры в пикселях задают в первом случае ширину элементов (по 100px), во втором — высоту (50px).

Вот еще один пример, который поможет лучше понять принцип работы:

.wrapper {
    display grid;
    grid-template-columns 200px 50px 100px;
    grid-template-rows 100px 30px;
}

Отобразится следующая картинка:

Расположение и размеры

С этой функцией вы получите реально очень мощные возможности по созданию сеток сайтов. Допустим, у нас имеется размер 3х3:

.wrapper {
    display grid;
    grid-template-columns 100px 100px 100px;
    grid-template-rows 100px 100px 100px;
}

Если в HTML коде, как в нашем примере, 6 DIV элементов (см. в самом начале), то в данном случае на сайте отобразится только 2 ряда, третий временно не будет заполнен. Однако, когда мы начнем применять разные параметры для позиции и размеров блоков — grid-columnand grid-row, ситуация изменится.

Задаем одному из объектов стили:

.item1 {
    grid-column-start 1;
    grid-column-end 4;
}

Это означает, что DIV c классом item1 начинается с первой линии колонки в сетке и заканчивается на 4-той, то есть заполняет собой весь ряд.

Собственно, теперь некоторые объекты переместились на последнюю строку, которая у нас была прописана заранее (3х3). Существует вариант попроще:

.item1 {
    grid-column 1 / 4;
}

Напоследок автор приводит чуть более сложный код, который позволят понять как именно работает расположение элементов CSS Grid:

.item1 {
    grid-column-start 1;
    grid-column-end 3;
}
.item3 {
    grid-row-start 2;
    grid-row-end 4;
}
.item4 {
    grid-column-start 2;
    grid-column-end 4;
}

Он дает нам следующую картинку:

Получилось разобраться? В принципе, не сложно, однако нужно понимать, что это лишь базовая часть нюансов по CSS Grid.

Полезные ресурсы, уроки и руководства

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

Основные понятия в контексте CSS Grid

На этом ресурсе вы найдёте введение в работу с Grid, объяснение механизма работы Grid-контейнера, описание размещения элементов внутри контейнеров и многое другое.

Детальное руководство по CSS Grid

Подробное руководство, покрывающее все детали последней версии Grid. Крис Хаус рассматривает все нужные вам свойства и обозревает высокоуровневые концепты. Кроме того, он подкрепляет это образцами кода и визуальными примерами.

Grid в примерах

Приглашённый эксперт рабочей группы CSS, Рейчел Эндрю, — давний сторонник внедрения Grid в современный веб. Она делится большим количеством примеров о том, как использовать Grid, а также образцами кода, видеоуроками прочими полезными материалами на своём сайте Grid by Example.

В этом видео Рейчел объясняет множество практических примеров с Grid и показывает, как он может использоваться для создания современных адаптивных макетов.

Если вы до сих пор не выбрали между Flexbox и Grid, то посетите ещё один сайт Рейчел, где она рассказывает о ключевых различиях этих инструментов.

Рабочий пример: мой первый макет, созданный с CSS Grid

В этом примере Тайлер Стика показывает старый способ построения макетов (с помощью ) и пытается достичь того же результата с помощью Grid.

Особенности CSS Grid, которые заставляют моё сердце биться быстрее

Фронтенд разработчик Уна Кравец рассказывает о трёх функциях Grid, восхищающих её: включение элемента , использование  и названные области.

Практическое использование CSS Grid: добавление Grid в существующий проект

Эрик Мейер рассматривает процесс преобразования существующих CSS наработок в Grid без нарушения их работоспособности в браузерах без поддержки Grid.

Grid-огород

Grid Garden — небольшая и забавная браузерная игра, основанная на написании кода для выращивания моркови в огороде. Это замечательный способ для практики и изучения основ CSS.

Говорит Томас Парк.

Шпаргалка по CSS Grid

Отличная песочница с качественным визуальным оформлением, которая поможет разобраться с терминологией, свойствами и с тем, как Grid работает в браузере.

Column Definitions vs Column Group Definitions

The list of columns in can be a mix of columns and column groups. You can mix and match at will, every level can have any number of columns and groups and in any order. What you need to understand when defining as follows:

  • The ‘children’ attribute is mandatory for groups and not applicable for columns.
  • If a definition has a ‘children’ attribute, it is treated as a group. If it does not have a ‘children’ attribute, it is treated as a column.
  • Most other attributes are not common across groups and columns (eg ‘groupId’ is only used for groups). If you provide attributes that are not applicable (eg you give a column a ‘groupId’) they will be ignored.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Grid Generator by Sarah Drasner

CSS Grid Generator is a shiny new generator coded by Sarah Drasner. The interface is super sleek and you can put together a basic CSS Grid layout in no time.

I generated a 2-column grid and dumped the code in my original example. You need media queries to make the layout responsive. Here’s the result:

See the Pen
CSS Grid Generator #1 by Sarah Drasner by Maria Antonietta Perna (@antonietta)
on CodePen.

The code looks like this:

This tool lets you:

  • set the numbers and units of rows and columns
  • drag within the boxes to place divs within them

At the time of writing, Sarah’s CSS Grid generator lets you create simple implementations of CSS Grid-based layouts. This is clearly stated by the author:

However, since this is a brand new open-source tool, it’s still in active development and the community is invited to contribute. Complex features like are not implemented yet, but they might find their way into it at a later time.

Разница между устаревшими подходами и современными стандартами

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

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

Решение задачи с помощью Flexbox

Контекст форматирования Flexbox инициализируется путем создания flex-контейнера.

Родительским элементом является . Он содержит боковую панель и основную зону. Создаём контейнер:

И получаем:

Flexbox в действии

Не забудем о пропорциях:

Вуаля! Проблему можно считать решенной:

Задача решена

С Flexbox можно делать много разных вещей:

  • Отцентрировать боковую панель и основную зону по вертикальной оси:

  • Изменить положение одного из дочерних элементов:

  • Менять порядок дочерних элементов без изменения HTML-кода:

И я затронул лишь верхушку айсберга Flexbox.

Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.

Прим. перев. Разобраться с Flexbox поможет наше наглядное введение.

Решение проблемы с помощью Grid

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

Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:

Вот весь CSS:

И вот что мы получим:

Первичный вариант

Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.

Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?

Что, если мы разделим пропорции ширины, как раньше:

Пропорциональное распределение ширины для дочерних элементов

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

Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи необходимо определить ряды и строки внутри него.

Вот как это делается:

Решение в одну строку — красиво, не правда ли? определяет пропорции столбцов в сетке.

Задача решена

Но с помощью Grid можно сделать гораздо больше.

Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:

Вот что мы должны получить:

Заливка цветом зоны основного контента

Посмотрим, что хорошего может предложить Grid:

  • Можно определить разрыв между столбцами:

    Вот результат:

    Нет необходимости в добавлении отступов к блокам и : это делает .

  • Можно сделать столько столбцов, сколько вам нужно. Примеры выше использовали только по одному элементу и . Добавим ещё два:

    Grid сам понял, что нам надо — не пришлось даже трогать CSS.

  • Можно определить пробел между строками:

    Для упрощения можно использовать сокращение: вместо и .

  • Можно определять размеры строк:

    Теперь высота первой, второй и третьей строк равна 200, 300 и 400 пикселей соответственно.

Для начала хватит и этого — но это далеко не всё.

Адаптивные размеры и автозаполнение

Теперь сде­ла­ем так:

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

Запи­шем это в раз­де­ле со стилями:

grid-template-rows: 50px 1fr 50px;

grid-template-columns: repeat(4, 1fr);

Кажет­ся, что 1fr, кото­рый дол­жен был рас­тя­нуть вто­рую стро­ку на всё сво­бод­ное место, не рабо­та­ет. Но с ним всё в поряд­ке, ошиб­ки тут нет, смот­ри­те, что про­изо­шло на самом деле:

  1. Пер­вая стро­ка полу­чи­ла шири­ну 50 пикселей.
  2. Тре­тья стро­ка тоже полу­чи­ла 50 пикселей.
  3. После это­го бра­у­зер, гля­дя на 1fr, стал высчи­ты­вать, какую высо­ту сде­лать у вто­рой строки.
  4. Бра­у­зер зна­ет, что 1fr дол­жен запол­нить всё остав­ше­е­ся сво­бод­ное место в сет­ке, но у нас ниж­няя гра­ни­ца сет­ки при­ле­га­ет вплот­ную к послед­ней строке.
  5. Это зна­чит, что сво­бод­но­го места в сет­ке нет, поэто­му бра­у­зер учёл все внут­рен­ние отсту­пы из общих настро­ек ячей­ки и сде­лал вто­рую стро­ку мини­маль­ной высоты.

Что­бы это испра­вить, нам нуж­но явно задать общую высо­ту сет­ки — напри­мер в пикселях:

height: 300px;

Что­бы сет­ка рас­тя­ну­лась по высо­те на всё окно, исполь­зу­ют отно­си­тель­ные еди­ни­цы, напри­мер, vh — она ука­зы­ва­ет, сколь­ко про­цен­тов от высо­ты окна будет зани­мать эле­мент. Что­бы рас­тя­нуть сет­ку до края, напишем:

height: 100vh;

Поло­сы про­крут­ки появи­лись из-за того, что общий раз­мер сет­ки у нас боль­ше 100% высо­ты окна — к высо­те доба­ви­лись внеш­ние и внут­рен­ние отсту­пы сетки.

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

height: 92vh;

grid-template-columns: 1fr 2fr 2fr 1fr ;

grid-template-rows: 50px 1fr 50px;

Теперь у нас полу­чил­ся кра­си­вый шаб­лон на 12 ячеек:

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

Исполь­зуя нуж­ные раз­ме­ры, авто­за­пол­не­ние и полез­ные функ­ции из нашей под­бор­ки совре­мен­ных CSS-команд, мож­но полу­чить любой шаб­лон для вёрст­ки страницы.

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

align-content

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

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

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

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

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

start
выравнивает сетку по верхней части контейнера.
end
выравнивает сетку по нижней части контейнера.
center
масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера.
space-around
одинаковое пространство между элементами, и полуразмерные отступы по краям.
space-between
одинаковое пространство между элементами, без отступов по краям.
space-evenly
одинаковое пространство между элементами, и полноразмерные отступы по краям.

All CSS Grid Properties

Property Description
column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows,
grid-template-columns, grid-template-areas, grid-auto-rows,
grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns
and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
row-gap Specifies the gap between the grid rows

❮ Previous
Next ❯

Повторяющиеся строки и столбцы

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

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Функция repeat() принимает два аргумента:

  • Сколько раз повторять список трека.
  • Список трека для повторения.

Первый аргумент может быть выражен положительным целым числом или ключевыми словами  или . Приведенный выше CSS-код создает следующий Grid:

Повторяющийся Grid с единицами измерения .

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

Повторяющийся шаблон Grid из двух столбцов.

Vue Grid Generator by Masaya Kazama

Vue Grid Generator has a couple of handy preset layouts, the Holy Grail and the Article List, that you can easily customize by adding and removing elements and adjusting sizes. This is the reason why, instead of confining myself to the CSS Grid code for the cards container, I approximated the entire layout simply by customizing the preset Article List layout.

This tool lets you build your CSS Grid using the and related properties. Also, you need media queries to make the page responsive and you can only set the property manually.

Here’s what the default layout looked like after I copied and pasted the generated code into a new Pen and set the selector’s height to :

Below is the final result, after a few CSS and HTML adjustments to approximate the look and feel of the original demo:

See the Pen
CSS Grid Generator #4 by Masaya Kazama by Maria Antonietta Perna (@antonietta)
on CodePen.

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-area
Даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через свойство
. В качестве альтернативы, это свойство может быть
использовано в качестве сокращения для + + +
Значения:

  • name — название, которое вы выберите
  • grid-row-start / grid-column-start / grid-row-end / grid-column-end — может быть нумерацией или
    названиями линий

Примеры:

  • grid-area: header;
  • grid-area: sidebar;
  • grid-area: 1 / 2 / span 2 / -1;
grid-column-startgrid-column-endgrid-row-startgrid-row-end
Определяют местоположение в сетке ссылаясь на конкретные линии. grid-column-start / grid-row-start —
это линия с которой начинается элемент, а grid-column-end / grid-row-end — это линия на которой
элемент заканчивается.
Значения:

  • grid-line — может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся
    на именованную линию
  • span N — элемент, который будет охватывать предоставленное в N количество треков
  • span grid-line — элемент будет охватывать пространство пока не достигнет линии с название
    указанным вместо grid-line
  • auto — указывает автоматическое размещение, автоматический охват или охват по умолчанию

Примеры:

  • grid-column-start: 2;
  • grid-column-end: span 3;
  • grid-row-start: myLine1;
  • grid-row-end: -1;
grid-columngrid-row
Сокращения для + и + соответственно.
Значения:

  • grid-column: start-line / end-line;
  • grid-row: start-line / end-line;
  • grid-column: start-line / span value;
  • grid-row: start-line / span value;

Примеры:

  • grid-column: 2 / span 3;
  • grid-row: myLine1 / -1;
justify-selfalign-selfplace-self
justify-self — Выравнивает содержимое элемента вдоль оси строки. align-self — Выравнивает содержимое
элемента вдоль оси столбца. place-self — Выравнивает текущий элемент внутри ячейки по двум осям сразу.
Эти значение применяются к содержимому внутри отдельного элемента.
Значения:

  • start — выравнивает содержимое по верхней / левой части области
  • end — выравнивает содержимое по нижней / правой части области
  • center — выравнивает содержимое по центру области
  • stretch (default) — заполняет всю высоту / ширину области

Примеры:

  • align-self: center;
  • justify-self: start;
  • place-self: end;
  • place-self: align-self justify-self;

Свойства grid-auto-rows, grid-auto-columns и grid-auto-flow

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

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

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

В свою очередь для колонок есть свойство которое выставляет ширину колонки.

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

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

Хочу заметить важную вещь, это то что ячейки выстраиваются вдоль колонок, а не строк. A и B в первой колонке, C и D во второй и т.д.

Как видим, третья колонка добавилась автоматически и ее ширина формируется на основе контента в самой широкой ячейке. Давайте укажем ширину для этой колонки.

Получаем уже привычный нашему глазу грид.

Выводы

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

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

  • CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
  • Используйте CSS Grid для двумерных макетов (строк И колонок).
  • Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector