✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item. All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:

Since elements can overlap each other in a CSS grid, it doesn't even try to align them. As its name suggests, it is a grid, not a column layout.

However, when 2 elements begin at the same grid row, they overlap.

It’ll fill the area by default, but it doesn’t have to. It could be smaller or bigger. It could be aligned into any of the corners or centered.

You use grid-area, so the place for the side nav is allocated at start. If you hide (or even delete) the side nav, that won't change anything about this. You have to do a little trick: Set the width for the first column to 0 and change the grid-gap because otherwise you will have a (not needed) gap at the left.

Adding backgrounds and borders does feel like a missing feature of the CSS Grid specification and one which the Working Group have discussed along with many members of the community (the discussion thread is on GitHub).

With Grid and generated content, we can add a line either side of our heading without adding any additional markup. The line will grow and shrink according to available space

The key phrase here is “children of a grid container.” The specification defines the creation of a grid on the parent element, which child items can be positioned into. It doesn’t define any styling of that grid, not even going as far as to implement something like the column-rule property we have in Multi-column Layout. We style the child items, and not the grid itself, which leaves us needing to have an element of some sort to apply that style to.

Ensure that there can only be four items per row: grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); grid-gap: 10px; With 20% minimum width per item, and a grid gap (of any length), there can never be more than four items per row.

auto (i.e. minmax(auto, max-content))

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

If no end line value is declared, the item will span 1 track by default.

Notice that you’re not naming lines with this syntax, just areas.

The syntax itself provides a visualization of the structure of the grid.

justify-content Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.

this issue is rather about styling the the cells and areas

This idea is not new, there are reference books which teach the use of grid layout, I haven't seen a single book that doesn't show a grid overlay as part of the process.

the author should be able to style area boxes

#grid::grid-area(1 / 2 / 3 / 4) { background-color: red;

When you generate before- and after-content pseudo-elements, Grid treats them as actual elements and makes them grid items.

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.

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; }

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.

They likely won’t have any content, making them a sort of structural filler to spackle over the gaps in Grid’s capabilities.

Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace.

Flexbox: content dictates layout

Grid: container dictates layout

Flexbox is for one dimensional layout (row or column). CSS grid is for two dimensional layout.

Your grid areas can only be rectangles (like the left), not arbitrary polygons (like the right).

.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; }

the difference is exactly like block and inline-block ... if you use inline-grid with sibling elements they will be placed in the same line unlike grid ... so here you change to grid also since each element is inside a grid area alone

auto As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

This is really cool! Having the content decide on the space it needs is so powerful!

The explanation here is that the minimum size of an fr unit is auto. Grid then looks at the min-content size of the item. If the item has a size (you’ve given it a width) or has something in it with a size such as an image, the min-content size might be much bigger than the share of available space you think 1fr will give you. It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over. If there is space to grow then the tracks grow from that min-content size assigning space. Using minmax, as you have pointed out, is the best thing to do if you want to forcibly have equal width tracks, as that says “I want this track to have a min-content size of 0”, you could potentially in that situation end up with overflows as you lose the squishiness.

It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over.

It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside.

Making literal grids. Like X columns with Y gap between them homegrown framework stuff. grid-gap is wonderful, as gutters are the main pain point of grid systems.

So I won't be covering the out of date IE syntax