Placing items in grids
Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to have this post as a reference. ## Explicit positioning With the following HTML: ```html
01
02
03
04
05
06
07
08
09
10
Be careful
Changing the viewing order can have accessibility implications since the visual rendering of the page will be different than what screen readers will read (they will still work from the document order). Make sure that changing the visual order will not affect the meaning of the content for people using assistive technology. See [Reordering and Accessibility](https://drafts.csswg.org/css-grid/#order-accessibility) in the [CSS Grid Layout Module Level 2](https://drafts.csswg.org/css-grid/) draft specification !!! ## Auto placement and implicit grids When we don't place items on the grid they will be automatically laid out in document order, similar to what Flexbox does, but it provides some additional advantages and disadvantages. The code has been slightly changed. We provide two values for the gap property: The first one is the row gap and the second is the columns'. The biggest difference is that we're sizing the implicit rows that we'll create. Using `grid-auto-rows` we tell the browser that the first and odd rows will be 100px and the second and even rows will be 200px high. ```css .container { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-columns: 1fr; gap: 1rem 2rem; grid-auto-rows: 100px minmax(200px, 1fr); } ``` This will lay out the content in as many rows and columns as necessary until all the content is displayed. This is what the code looks like:See the Pen grid placement (02) by Carlos Araya (@caraya) on CodePen.
### grid-auto-flow Grid has a similar property to `flex-flow`, the `grid-auto-flow` property. This property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. It takes one or two arguments. If it has a single value it's either one of `row`, `column` or `dense`. If it has two attributes then they are a combination of `row` or `column` AND `dense` (`row dense` and `column-dense`). The possible values are row : Items are placed by filling each row in turn, adding new rows as necessary. : This is the default if you don't provide a value. column : Items are placed by filling each column in turn, adding new columns as necessary. dense : This algorithm attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order when doing so would fill in holes left by larger items. : If it is omitted, a `sparse` algorithm is used, where the placement algorithm only ever moves forward in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items. ```css .container { display: grid; grid-auto-flow: column; grid-template-columns: repeat(6, 1fr); gap: 1rem 2rem; grid-auto-rows: 100px minmax(200px, 1fr); } ``` This example shows the auto-flow column layout. ## Template areas Rather than relying on explicit positioning or auto-flow algorithms, we can use areas to define the layout. The [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) creates a row for every separate string listed, and a column for each cell in the string. Multiple cell tokens with the same name within and between rows create a grid area that spans the corresponding grid cells. **Unless those cells form a rectangle, the declaration is invalid**. You can refer to unnamed or empty areas in a grid using null cell tokens. A null cell token is a sequence of one or more U+002E FULL STOP (`.`) characters (`.`, `...`, or `.....`). ```css .container { display: grid; gap: 2rem; grid-template-areas: "h h h h h h" "h h h h h h" "n m m m m m" "n m m m m m" "n m m m m m" "n m m m m m" "n m m m m m" "f f f f f f"; } ``` We can then assign elements to each of the areas we created in the template using the grid placement shorthands [grid-row](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row), [grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column), and [grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area). Using nested selectors we can style children elements only within the content of the grid. The paragraphs inside the main grid area are given a specific width using the [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size) property. This will be specific to paragraphs inside the `main` area. ```css .container > header { grid-area: h; } .container > nav { grid-area: n; } .container > main { grid-area: m; p { inline-size: 80ch; } } .container > footer { grid-area: f; } ``` This Codepen shows what a grid area layout looks like: ## Subgrid When you add `display: grid` to a grid container, only the direct children become grid items and can then be placed on the grid you created. The children of these items display in normal flow. You can nest grids by making a grid item a grid container. These grids are independent of the parent grid and each other, meaning that they do not take their track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid. If you use `grid-template-columns: subgrid`, `grid-template-rows: subgrid` or both, the nested grid uses the tracks defined on the parent. We will use this HTML for this example: ```htmlA
B
C
E
F
G
H
I