Что такое дорожка сетки grid track

Faux Grid Tracks

A little while back, there was a question posted to css-discuss:

Article Continues Below
Article Continues Below 4 Comments

Translations

Northwestern Online MS in Information Design & Strategy. Choose from tracks in content strategy, UX/UI, communication with data, and learning design.

A Book Apart:
Brief books for people who make websites.

Screenshot: The basic layout features a 3x3 grid with lines breaking up the grid like a tic-tac-toe board.

This approach has the advantage of not relying on class names or what-have-you. It does fall apart, though, if the grid flow is changed to be columnar, as we can see in Figure 2.

Screenshot: If you switch the grid to columnar flow order, the borders get out of whack. Instead of a tic-tac-toe board, the right-most horizontal borders have moved to the bottom of the grid and the bottom-most vertical borders have moved to the right edge.

If the flow is columnar, then the border-applying rules have to get flipped, like this:

#ttt > *:nth-of-type(3n) < border-bottom-width: 0; >#ttt > *:nth-of-type(n+7)

That will get us back to the result we saw in Figure 1, but with the content in columnar order instead of row order. There’s no row reverse or column reverse in Grid like there is in flexbox, so we only have to worry about normal row and columnar flow patterns.

But what if a later change to the design leads to grid items being rearranged in different ways? For example, there might be a reason to take one or two of the items and display them last in the grid, like this:

#ttt > *:nth-of-type(4), #ttt > *:nth-of-type(6)

Just like in flexbox, this will move the displayed grid items out of source order, placing them after the grid items that don’t have explicit order values. If this sort of rearrangement is a possibility, there’s no easy way to switch borders on and off in order to create the illusion of the inner grid lines. What to do?

Attack of the filler s!#section3

If we want to create standalone styles that follow grid tracks—that is, presentation aspects that aren’t directly linked to the possibly-rearranged content—then we need other elements to place and style. They likely won’t have any content, making them a sort of structural filler to spackle over the gaps in Grid’s capabilities.

Thus, to the element, we can add two elements with identifiers.

These “filler s,” as I like to call them, could be placed anywhere inside the , but the beginning works fine. We’ll stick with that. Then we add these styles to our original grid from the basic layout:

b[id] < border: 1px solid gray; >b#h < grid-column: 1 / -1; grid-row: 2; border-width: 1px 0; >b#v < grid-column: 2; grid-row: 1 / -1; border-width: 0 1px; >

The 1 / -1 means “go from the first grid line to the last grid line of the explicit grid”, regardless of how many grid lines there might be. It’s a handy pattern to use in any situation where you have a grid item meant to stretch from edge to edge of a grid.

So the horizontal has top and bottom borders, and the vertical has left and right borders. This creates the board lines, as shown in Figure 3.

Screenshot: With the filler b tags, you can see the tic-tac-toe board again. But only the corners of the grid are filled with content, and there are 5 cells below the board as the grid lines have displaced the content.

Hold on a minute: we got the tic-tac-toe grid back, but now the numbers are in the wrong places, which means the s that contain them are out of place. Here’s why: the elements holding the actual content will no longer auto-flow into all the grid cells, because the filler s are already occupying five of the nine cells. (They’re the cells in the center column and row of the grid.) The only way to get the elements into their intended grid cells is to explicitly place them. This is one way to do that:

div:nth-of-type(3n+1) < grid-column: 1; >div:nth-of-type(3n+2) < grid-column: 2; >div:nth-of-type(3n+3) < grid-column: 3; >div:nth-of-type(-n+3) < grid-row: 1; >div < grid-row: 2; >div:nth-of-type(n+7)

That works if you know the content will always be laid out in row-then-column order. Switching to column-then-row requires rewriting the CSS. If the contents are to be placed in a jumbled-up order, then you’d have to write a rule for each .

This probably suffices for most cases, but let’s push this even further. Suppose you want to draw those grid lines without interfering with the automatic flow of the contents. How can this be done?

Overgridding#section4

It would be handy if there were a property to mark elements as not participating in the grid flow, but there isn’t. So instead, we’ll split the contents and filler into their own grids, and use a third grid to put one of those grids over the other.

This will necessitate a bit of structural change to make happen, because for it to work, the contents and the filler s have to have identical grids. Thus we end up with:

The first thing is to give the board and the content s identical grids. The same grid we used before, in fact. We just change the #ttt rule’s selector a tiny bit, to select the children of #ttt instead:

Now that the two grids have the same layout, we need to place one over the other. We could relatively position the #ttt container and absolutely position its children, but there’s another way: use Grid.

#ttt < /* new rule added */ display: grid; >#ttt > *

But wait—where are the rows and columns for #ttt ? Where we’re going, we don’t need rows (or columns). Here is how the two grids end up occupying the same area with one on top of the other:

#ttt < display: grid; >#ttt > * < display: grid; grid-template-columns: repeat(3,5em); grid-template-rows: repeat(3,5em); grid-column: 1; /* explicit grid placement */ grid-row: 1; /* explicit grid placement */ >

So #ttt is given a one-cell grid, and its two children are explicitly placed in that single cell. Thus one sits over the other, as with positioning—but unlike positioning, the outer grid’s size is dictated by the layout of its children. It will resize to surround them, even if we later change the inner grids to be larger (or smaller). We can see this in practice in Figure 4, where the outer grid is outlined in purple in Firefox’s Grid inspector tool.

Screenshot: In the Firefox Grid Inspector, the containing grid spans the full width of the page with a purple border. Occupying about a third of the space on the left side of the container are the two child grids, one with the numbers 1 through 9 in a 3 by 3 grid and the other with tic-tac-toe lines overlaid on top of each other.

And that’s it. We could take further steps, like using z-index to layer the board on top of the content (by default, the element that comes later in the source displays on top of the element that comes earlier), but this will suffice for the case we have here.

The advantage is that the content , having only its own contents to worry about, can make use of grid-auto-flow and order to rearrange things. As an example, you can do things like the following and you won’t need all of the :nth-of-type grid item placements from our earlier CSS. Figure 5 shows the result.

/* added to #snippet13 code */ #ttt > #content < grid-auto-flow: column; >#ttt > #content > :nth-child(5)

Screenshot: The overgridded version, where the numbered 3 by 3 grid is overlaid on top of the tic-tac-toe board, continues to work fine if you reorder the cells. In this case, the number 5 has moved from the central grid cell to the bottom right.

Caveats#section5

The downside here, and it’s a pretty big one, is that the board and content grids are only minimally aware of each other. The reason the previous example works is the grid tracks are of fixed size, and none of the content is overflowing. Suppose we wanted to make the columns and rows resize based on content, like this:

#content

This will fall apart quickly, with the board lines not corresponding to the layout of the actual content. At all.

In other words, this overlap technique sacrifices one of Grid’s main strengths: the way grid cells relate to other grid cells. In cases where content size is predictable but ordering is not, it’s a reasonable trade-off to make. In other cases, it probably isn’t a good idea.

Bear in mind that this really only works with layouts where sizes and placements are always known, and where you sometimes have to layer grids on top of one another. If your Filler comes into contact with an implicitly-placed grid item in the same grid as it occupies, it will be blocked from stretching. (Explicitly-placed grid items, i.e., those with author-declared values for both grid-row and grid-column , do not block Filler s.)

Why is this useful?#section6

I realize that few of us will need to create a layout that looks like a tic-tac-toe board, so you may wonder why we should bother. We may not want octothorpe-looking structures, but there will be times we want to style an entire column track or highlight a row.

Since CSS doesn’t (yet) offer a way to style grid cells, areas, or tracks directly, we have to stretch elements over the parts we want to style independently from the elements that contain content. There is a discussion about adding this capability directly to CSS in the Working Group’s GitHub repository, where you can add your thoughts and proposals.

But why s ? Why?#section7

I use s for the decorative portions of the layout because they’re purely decorative elements. There’s no content to strongly emphasize or to boldface, and semantically a isn’t any better or worse than a . It’s just a hook on which to hang some visual effects. And it’s shorter, so it minimizes page bloat (not that a few characters will make all that much of a difference).

More to the point, the ’s complete lack of semantic meaning instantly flags it in the markup as being intentionally non-semantic. It is, in that meta sense, self-documenting.

Is this all there is?#section8

There’s another way to get this precise effect: backgrounds and grid gaps. It comes with its own downsides, but let’s see how it works first. First, we set a black background for the grid container and white backgrounds for each item in the grid. Then, by using grid-gap: 1px , the black container background shows between the grid items.

#ttt < display: grid; grid-template-columns: repeat(3,5em); grid-template-rows: repeat(3,5em); background: black; grid-gap: 1px; >#ttt > div

Simple, no Filler s needed. What’s not to like?

The first problem is that if you ever remove an item, there will be a big black block in the layout. Maybe that’s OK, but more likely it isn’t. The second problem is that grid containers do not, by default, shrink-wrap their items. Instead, they fill out the parent element, as block boxes do. Both of these problems are illustrated in Figure 6.

Screenshot: When a grid cell goes missing with the background and grid-gap solution, it leaves a big black box in its place. There

You can use extra CSS to restrict the width of the grid container, but the background showing through where an item is missing can’t really be avoided.

On the other hand, these problems could become benefits if, instead of a black background, you want to show a background image that has grid items “punch out” space, as Jen Simmons did in her “Jazz At Lincoln Center Poster” demo.

A third problem with using the backgrounds is when you just want solid grid lines over a varied page background, and you want that background to show through the grid items. In that case, the grid items (the s in this case) have to have transparent backgrounds, which prevents using grid-gap to reveal a color.

If the s really chap your cerebellum, you can use generated content instead. When you generate before- and after-content pseudo-elements, Grid treats them as actual elements and makes them grid items. So using the simple markup used in the previous example, we could write this CSS instead:

#ttt < display: grid; grid-template-columns: repeat(3,5em); grid-template-rows: repeat(3,5em); >#ttt::before < grid-column: 1 / -1; grid-row: 2; border-width: 1px 0; >#ttt::after < grid-column: 2; grid-row: 1 / -1; border-width: 0 1px; >

It’s the same as with the Filler s, except here the generated elements draw the grid lines.

This approach works just fine for any 3×3 grid like the one we’ve been playing with, but to go any further, you’ll need to get more complicated. Suppose we have a 5×4 grid instead of a 3×3. Using gradients and repeating, we can draw as many lines as needed, at the cost of more complicated CSS.

#ttt < display: grid; grid-template-columns: repeat(5,5em); grid-template-rows: repeat(4,5em); >#ttt::before < content: ""; grid-column: 1 / -1; grid-row: 1 / -2; background: linear-gradient(to bottom,transparent 4.95em, 4.95em, black 5em) top left / 5em 5em; >#ttt::after < content: ""; grid-column: 1 / -2; grid-row: 1 / -1; background: linear-gradient(to right,transparent 4.95em, 4.95em, black 5em) top left / 5em 5em; >

This works pretty well, as shown in Figure 7, assuming you go through the exercise of explicitly assigning the grid cells similar to how we did in #snippet9.

Screenshot: A 5 by 4 grid with evenly spaced borders dividing the cells internally using background gradients.

This approach uses linear gradients to construct almost-entirely transparent images that have just a 1/20th of an em of black, and then repeating those either to the right or to the bottom. The downward gradient (which creates the horizontal lines) is stopped one gridline short of the bottom of the container, since otherwise there would be a horizontal line below the last row of items. Similarly, the rightward gradient (creating the vertical lines) stops one column short of the right edge. That’s why there are -2 values for grid-column and grid-row .

One downside of this is the same as the Filler approach: since the generated elements are covering most of the background, all the items have to be explicitly assigned to their grid cells instead of letting them flow automatically. The only way around this is to use something like the overgridding technique explored earlier. You might even be able to drop the generated elements if you’re overgridding, depending on the specific situation.

Another downside is that if the font size ever changes, the width of the lines can change. I expect there’s a way around this problem using calc() , but I’ll leave that for you clever cogs to work out and share with the world.

The funny part to me is that if you do use this gradient-based approach, you’re filling images into the background of the container and placing items over that … just as we did with Faux Columns.

Conclusion#section9

It’s funny how some concepts echo through the years. More than a decade ago, Dan Cederholm showed us how to fake full-height columns with background images. Now I’m showing you how to fake full-length column and row boxes with empty elements and, when needed, background images.

Over time, the trick behind Faux Columns fell out of favor, and web design moved away from that kind of visual effect. Perhaps the same fate awaits Faux Grid Tracks, but I hope we see new CSS capabilities arise that allow this sort of effect without the need for trickery.

We’ve outgrown so many of our old tricks. Here’s another to use while it’s needed, and to hopefully one day leave behind.

Recently by Eric Meyer

CSS: The Definitive Guide, 4th Edition

Weighing in a little over 1,100 pages, The Fourth Edition of CSS: The Definitive Guide is a lot to digest. We’re pleased to offer you this amuse-bouche, of sorts, on compositing and blending.

Mobile-First CSS: Is It Time for a Rethink?

Is mobile-first CSS always the best option? Patrick Clancey explores the pros and cons of the classic methodology, as well as when other solutions might work better.

Breaking Out of the Box

What can we do with just thirty pixels? With Progressive Web Apps blurring the lines between apps and websites, Patrick Brosset helps us think outside of the rectangular box. Learn how Windows Controls Overlay can free us from forty years of design constraints telling us how applications should look. Thirty pixels, it turns out, are full of exciting design opportunities.

About the Author

Eric Meyer

Eric Meyer has been working on the web since late 1993 and is the founder of Complex Spiral Consulting, co-founder of the microformats movement, and co-founder (with Jeffrey Zeldman) of An Event Apart. A widely read author, Eric enjoys a good meal whenever possible and considers almost no type of music to be worthless. He lives with his family in Cleveland..

Design for Real Life by Eric Meyer

You can’t always predict who will use your products, or what emotional state they’ll be in when they do. But by identifying stress cases and designing with compassion, you’ll create experiences that support more of your users, more of the time. Join Sara Wachter-Boettcher and Eric Meyer as they turn examples from more than a dozen sites and services into a set of principles you can apply right now.

Get our latest articles in your inbox. Sign up for email alerts.

4 Reader Comments

mcbenny says:

An interesting set of ways to handle this situation.
When I started to read I decided to try it myself, without reading further more, and I ended up with something different, using ::before and ::after but for each grid item, and by adding classes for specific situation, if you want to have a look, it can be another option as well.
https://codepen.io/mcbenny/pen/dZmQyZ
With a bit of Sass, we can even achieve a fully automatic grid: https://codepen.io/mcbenny/pen/EbEOvX without any specific class, just maintaining the number of rows and columns as Saaa variables!

Читать:

Вход функции семьи учетных записей майкрософт как отключить windows 10

Eugenia says:

I haven’t used the CSS grid yet, or seen it much IRL, and my first reaction was that flexbox is still better for aligning items, especially vertically. But I see it’s possible to use both of them https://css-tricks.com/css-grid-replace-flexbox/

Radu PAS says:
s is inside the whole code element instead of just
WebDesignCity says:

Nice Article…
Web design and we development are so very related that for a normal person it is one and the same thing. But for us these are entirely different aspects. Web Design City

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

Grid Tracks

A grid track is the space between two adjacent grid lines. They are defined in the explicit grid by using the grid-template-columns and grid-template-rows properties or the shorthand grid or grid-template properties. Tracks are also created in the implicit grid by positioning a grid item outside of the tracks created in the explicit grid.

The image below shows the first row track on a grid.

Diagram showing a grid track.

Track sizing in the explicit grid

When defining grid tracks using grid-template-columns and grid-template-rows you may use any length unit, and also the flex unit, fr which indicates a portion of the available space in the grid container.

Example

The example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. Once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. One part is given to column 2, 3 parts to column 3.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; >

.wrapper  display: grid; grid-template-columns: 200px 1fr 3fr; >

div class="wrapper"> div>Onediv> div>Twodiv> div>Threediv> div>Fourdiv> div>Fivediv> div>

Track sizing in the implicit grid

Tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the grid-auto-rows and grid-auto-columns properties.

CSS Grid

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

Концепция сетки и основные понятия

Сетка (grid) — набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки. Линии сетки (grid lines) — это невидимые горизонтальные и вертикальные разделительные линии, они существуют по обе стороны от строки и столбца. Существует ссылка по числовому индексу (свойства grid-column-start, grid-column-end,grid-row-start и grid-row-end) и по имени, заданному в CSS-коде. Числовые индексы сетки зависят от стиля языка. Первым столбцом может являться как самый левый, так и самый правый столбец. Выделяют 2 группы линий сетки: первая группа определяет столбцы, которые проходят вдоль оси блока (ось столбцов), и вторая группа, определяющая строки, простирающиеся вдоль линейной оси (ось строк), в соответствии CSS3 режимом записи. Дорожка сетки (grid track) — пространство между 2 соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от 1 края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Дорожки сетки аналогичны столбцам и строкам таблицы. По умолчанию смежные дорожки плотно прилегают друг к другу, задать расстояние между ними можно с помощью свойств row-gap, column-gap и gap. Ячейка сетки (grid cell) — область, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. В ней можно разместить контент, а также это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств. Область сетки (grid area) — прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть такой же маленькой, как одна ячейка, или такой же большой, как все ячейки сетки. Область сетки может быть задана явно с помощью свойства grid-template-areas, по умолчанию на нее ссылаются ограничивающие линии сетки. Элементы сетки (grid items) — отдельные элементы, которые назначаются области сетки . Каждый контейнер-сетка включает 0 и более элементов сетки; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки. Не требуется, чтобы все области сетки были заполнены элементами. Возможно, что большинство ячеек сетки будут пустыми от любого содержимого. Также возможно, что элементы сетки будут перекрывать друг друга, либо определять перекрывающиеся области сетки.

Контейнер-сетка

Контейнер-сетка (grid container) — это блок, который устанавливает контекст форматирования по типу сетки. Создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки. Когда вы определяете контейнер сетки с помощью display: grid или display: inline-grid, создаете новый контекст форматирования для содержимого этого контейнера, который влияет только на дочерние элементы сетки. Существует 2 вида: обычный display: grid и встроенный display: inline-grid. Первый генерирует grid-контейнер уровня блока, второй — grid-контейнер уровня строки. Не являются блочными контейнерами, поэтому некоторые CSS-свойства не работают в контексте макета сетки: float и clear игнорируются элементами сетки, но не самим контейнером-сеткой. vertical-align не влияет на элементы сетки. Псевдоэлементы ::first-line и ::first-letter не применяются к контейнеру-сетке и его потомкам. Вычисляемое значение свойства display будет grid.
Cетка по умолчанию имеет 1 столбец и строку, которые занимают полный размер контейнера. Чтобы разделить контейнер-сетку на столбцы или строки используются свойства grid-template-columns, grid-template-rows и grid-template-areas. Если сетка больше из-за элементов сетки, размещенных вне явной сетки, то будут созданы неявные дорожки, размер этих неявных дорожек будет определяться свойствами grid-auto-rows и grid-auto-columns. Свойства grid и grid-template — это сокращенные обозначения, которые можно использовать для одновременной установки всех свойств сетки grid-template-columns, grid-template-rows и grid-template-areas. grid сбрасывает свойства, управляющие неявной сеткой, а grid-template оставляет их без изменений. Чтобы определить количество строк/столбцов имеется свойства grid-template-rows иgrid-template-columns. Свойства не наследуется. Относительные, абсолютные единицы и процентные значения Размеры дорожек сетки задаются с помощью положительных значений, используя относительные единицы длины — em, vh, vw; абсолютные единицы длины — px и проценты %. Размеры в % вычисляются от ширины или высоты контейнера-сетки. .grid-container <
display: grid;
grid-template-rows: 5em 200px 200px;
grid-template-columns: 200px 5em 50%;
> Гибкие размеры дорожек: единица измерения fr fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc().
.grid-container display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* grid-template-columns: 25% 25% 25% 25%; */
> Минимальные и максимальные размеры дорожек Если сумма всех гибких размеров дорожек меньше 1, то займут только долю оставшегося пространства. Если доступное пространство бесконечно (ширина/высота контейнера-сетки не заданы), дорожки сетки масштабируются по своему содержимому, при этом сохраняются их соответствующие пропорции. max-content присваивает для дорожки размер, занимающий максимальное пространство с учетом содержимого элемента сетки. min-content устанавливает минимальное пространство, нужное для этого содержимого, ширина элемента ориентируется на самое длинное слово или на самое широкое изображение. Функция minmax(min,max) — определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, minmax(min,max) обрабатывается как min. Автоматические размеры auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Обрабатывается так же, как и max-content. Растягивается за счет свойств align-content и justify-content.
.grid-container display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
> Соответствие содержимому Размеры дорожек можно задавать с помощью значения fit-content(длина или %), представляющее собой формулу min(maximum size, max(minimum size, argument)), которая вычисляется как minmax(auto, max-content), то есть auto. При этом, размер дорожки ограничивается значением, указанным в скобках, и если оно больше, чем автоматический минимум. .grid-container display: grid;
grid-template-columns: fit-content(50%) fit-content(300px) 1fr;
> Повтор строк и столбцов .grid-container display: grid;
grid-template-rows: repeat(3, 200px);
> Первый аргумент задает количество повторений, которое задается с помощью положительного целого числа или ключевых слов. Второй аргумент — размер повторяющейся дорожки. Существуют некоторые ограничения: Нотация repeat() не может быть вложенной. Значения auto-fill или auto-fit не могут быть совмещены с min-content, max-content, auto, fit-content() или fr.
Синтаксис repeat() имеет несколько форм: /*повтор дорожки*/
repeat(количество повторений, имя дорожки? размер дорожки + имя дорожки?)
/*автозаполнение дорожек сетки*/
repeat(auto-fill или auto-fit, имя дорожки? фиксированный размер дорожки + имя дорожки?)
/*фиксированный повтор дорожки*/
repeat(количество повторений, имя дорожки? фиксированный размер дорожки + имя дорожки?)
Используя значение auto-fill, всегда получите хотя бы 1 столбец, даже если он не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.

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

Особенности форматирования контейнер-сетки: Для элементов сетки блокируется их значение свойства display. Значение display: inline-block вычисляется в display: block, анонимные блоки текста также занимают всю ширину контейнера и образуют разрыв строки. Размер элемента сетки в пределах блока определяется его областью сетки.
Расчеты элементов сетки для width: auto и height: auto зависят от их значений align-self:align-self: normal — не замещаемые элементы заполняют область сетки, а замещаемые элементы имеют свои размеры; align-self: stretch; — категории элементов заполняют область сетки; align-self: start/center- не замещаемые элементы устанавливают размеры в соответствии со своим содержимым, замещаемые элементы используют собственные размеры. Соседние элементы сетки находятся в независимых областях сетки, то поля соседних элементов сетки margin не схлопываются.
Браузеры по-разному обрабатывают процентные значения свойств margi и padding, поэтому не рекомендуется использовать их при задании значений этих свойств. Поля margin: auto расширяются, поэтому могут использоваться для выравнивания элемента.

Размещение и упорядочивание элементов сетки

Свойства дают возможность упорядочивать содержимое сетки так, что визуальное представление отличается от порядка элементов в html-документе. Размещение с помощью линий сетки Элементы сетки связаны с областью сетки, которая определяет блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки — количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает 1 дорожку на каждой оси. Можно опустить значение grid-column-end или grid-row-end. Свойства размещения на сетке — grid-row-start, grid-row-end, grid-column-start и grid-column-end и их краткая запись grid-row, grid-column и grid-area позволяют определить размещение элемента сетки, предоставив любую (или 0) из следующих 6 частей информации:

	Строка	Столбец
Начало	Начальная линия строки	Начальная линия столбца
Конец	Конечная линия строки	Конечная линия столбца
Диапазон	Диапазон строк	Диапазон столбцов

Размещение элементов сетки с помощью числовых индексов .grid-container <
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr;
>
.post-1 <
grid-row-start: 1; grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
>
.post-2 <
grid-row-start: 1;
grid-column-start: 3;
>
.post-3 <
grid-row-start: 2;
grid-column-start: 3;
>
.post-4 <
grid-row-start: 3;
grid-column-start: 3;
>
.post-5 <
grid-row-start: 3;
grid-column-start: 2;
>
.post-6 <
grid-row-start: 3;
grid-column-start: 1;
>
Именованные линии сетки Упрощает использование свойств размещения сетки. Линии явны в свойствах grid-template-rows и grid-template-columns или неявны путем создания именованных областей сетки в свойстве grid-template-areas. Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. Неприемлемо применять span в качестве имени линии.

.grid-container <

display: grid;
grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end];
grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end];
>
.post-1 grid-row-start: span 2;
grid-column-start: span 2;
>
.post-2 grid-row-start: start;
grid-column-start: col3;
>
.post-3 grid-row-start: row2;
grid-column-start: col3;
>
.post-4 < grid-row-start: row3;
grid-column-start: col3;
>
.post-5 < grid-row-start: row3;
grid-column-start: col2;
>
.post-6 grid-row-start: row3;
grid-column-start: start;
>
Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas, принимая вид name-start и name-end. Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.
Краткая запись свойств размещения элементов сетки Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start/grid-row-end и grid-column-start/grid-column-end соответственно. Если заданы 2 значения, где 1 (до косой черты) устанавливается для параметра grid-row-start/grid-column-start, 2 — для grid-row-end/grid-column-end. В случае если второе значение опущено, а первое указано в формате пользовательского идентификатора, то grid-row-end/grid-column-end, также устанавливается в пользовательское имя сетки. В противном случае, оно рассчитывается в auto. Для свойства grid-area, если указано 4е значения, первое устанавливается для grid-row-start, второе — для grid-column-start, третье — для grid-row-end, четвертое — для grid-column-end. Если grid-column-end/grid-row-end не указан, а grid-column-start/grid-row-start указан в форме пользовательского имени, то для grid-column-end/grid-row-end также устанавливается значение пользовательского имени линии; в противном случае он установлен на auto. Когда grid-column-start опущен, а значение grid-row-start указан в форме пользовательского имени, оно устанавливается для всех 4 значений. Иначе изменяется на auto.

grid-row: a; grid-row: auto; grid-column: 2; grid-row: 1 / -1; grid-column: sidebar-start / footer-end;

grid-area: a;
grid-area: auto;

grid-area: 2 / 4;
grid-area: 1 / 3 / -1;
grid-area: header-start / sidebar-start / footer-end / sidebar-start;

Повторное упорядочивание элементов сетки

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

Выравнивание элементов сетки и промежутки между элементами

Для выравнивания элементов сетки можно использовать свойство margin, аналогично, как работает это свойство для блочных элементов. По умолчанию элементы сетки растягиваются, чтобы заполнить свою область сетки. Тем не менее, если justify-self или align-self вычисляют значение, отличное от stretch или задано margin: auto, элементы сетки будут автоматически изменяться в соответствии с их содержимым. Выравнивание с помощью margin: auto При расчете размеров дорожек сетки margin: auto обрабатываются как 0. Они поглощают положительное свободное пространство, предшествующее выравниванием с помощью свойств выравнивания. Переполняющиеся элементы игнорируют свои автоматические поля и переполнение, как указано в их свойствах выравнивания блоков. Выравнивание по оси строки Элементы сетки выравниваются в направлении оси строки с помощью свойства justify-self или свойства justify-items. Выравнивание по оси столбца. Элементы сетки выравниваются в направлении, перпендикулярном оси строки с помощью свойства align-self или свойства align-item, заданного для контейнера-сетки. Промежутки между элементами сетки Свойства row-gap и column-gap, если указаны в контейнере сетки, определяют промежутки между строками, столбцами сетки. Для определении размера дорожки любой промежуток рассматривается как дополнительная пустая дорожка указанного размера. Дополнительный промежуток добавляется между дорожками за счет свойств justify-content и align-content. Промежутки добавляются только между 2 дорожками сетки, то есть они не добавляются перед первой и после последней дорожки. row-gap: 1.5em;
column-gap: 10px;
gap: 1%;

Дополнительно

Дополнительная вкладка, для размещения информации о статьях, доставке или любого другого важного контента. Поможет вам ответить на интересующие покупателя вопросы и развеять его сомнения в покупке. Используйте её по своему усмотрению. Вы можете убрать её или вернуть обратно, изменив одну галочку в настройках компонента. Очень удобно.

So, what really is a grid track?

Grid track is a generic term for a grid column or grid row — in other words, it is the space between two adjacent grid lines.

I find the second phrase a little more explicit IMHO. It is what I teach when explaining it. Saying the grid track is a generic term for grid-column and grid-row just doesn’t give the full picture.

If you read the spec a little further, it says this

Each grid track is assigned a sizing function, which controls how wide or tall the column or row may grow, and thus how far apart its bounding grid lines are.

As seen in the last spec quote, grid tracks are essentially about sizing! How wide or tall the columns or rows are.

This is why I prefer to use the images such as the one below ( which I sketched BTW)

Faux Grid Tracks

Share this:#section1

Translations

Attack of the filler s!#section3

Overgridding#section4

Caveats#section5

Why is this useful?#section6

But why s ? Why?#section7

Is this all there is?#section8

Conclusion#section9

Recently by Eric Meyer

CSS: The Definitive Guide, 4th Edition

Further reading about CSS

Mobile-First CSS: Is It Time for a Rethink?

Breaking Out of the Box

About the Author

Eric Meyer

More from this author

CSS: The Definitive Guide, 4th Edition

Practical CSS Grid: Adding Grid to an Existing Design

A Redesign with CSS Shapes

Design for Real Life

The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik

Also from this author

Design for Real Life by Eric Meyer

4 Reader Comments

Got something to say?

More from ALA

Humility: An Essential Value

Personalization Pyramid: A Framework for Designing with User Data

Mobile-First CSS: Is It Time for a Rethink?

Designers, (Re)define Success First

Breaking Out of the Box

Grid Tracks

Track sizing in the explicit grid

Example

Track sizing in the implicit grid

See also

Found a content problem with this page?

CSS Grid

Концепция сетки и основные понятия

Контейнер-сетка

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

Размещение и упорядочивание элементов сетки

Повторное упорядочивание элементов сетки

Выравнивание элементов сетки и промежутки между элементами

So, what really is a grid track?

Похожие записи