CSS Grid was finalized in the spring of 2017 and was available within a month on most browsers.
Where Flexbox is for only one dimension, either horizontal or vertical, grid is for two dimensional layouts, both horizontal and vertical.
CSS Grid and Flexbox are changing layout. It will take a while for the changes to settle in and for best practices to arise. Play around with ready made interactive examples. You will be required to create layouts using CSS grid and flex.
There are many resources to better understand how css grids work.
Mozilla Grids article is a great place to start.
Rachel Andrew’s Grid by Example / Patterns is good too. She is a CSS grid ambassador and has various layouts prepared on CodePen. You can use them to start your layout.
Smashing Magazine ran a CSS Grid contest and came up with some great examples. The demonstration has lots of cutting edge CSS features in addition to using grid. For other examples using CSS grid, check out this restaurant menu or a modern blog . Looking through the code will provide you with ideas on how to implement your own CSS grid.
In the FireFox browser use the Inspect Element on the grid item and click on the grid features for visual aids in understanding how the grid is implemented. The other browsers have not followed, open up inspector and click to activate.
Occupy only the cells of the grid you want to fill. Create white-space! Designers Rejoice!
Grid introduces the fr unit which stands for fraction of available space.
Jen Simmons, a designer advocate for Safari, and previously, Mozilla, is a great resource, with examples and explanatory video worth checking out. Check out her grid basics (15 minutes).
CSS Tricks has a complete guide to CSS grid. It is well organized and clearly explained. It also has an interesting article: Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries. A fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS.
See the Pen
Responsive hexagon grid by Temani Afif (@t_afif)
on CodePen.
CSS Tricks further explores this hexagon example.
Multiple nested grids menu example
does not need media queries Download code.
CSS Grid Cheat Sheet reference is helpful to visually select the grid properties you want to use.
CSS Grid
basic concepts
- The grid lines that define the grid: they can be horizontal or vertical, and they are numbered starting at 1.
- The grid tracks, which are the rows (horizontal) or columns (vertical) defined in the grid.
- The grid cells, the intersection of a row and a column.
- A grid area, one or more adjacent grid cells that define a rectangle.
CSS grid defines the behavior of the children of a parent block display: grid; or inline-block display: inline-grid; element. The parent element is intersected by invisible horizontal and vertical grid lines that form potential Grid Cells. Grid Tracts are spans that cover horizontal rows or vertical columns. Grid Areas are conjoined Grid Cells. Grid Gaps create space around grid lines. grid-gap: 50px 100px; is shorthand for 50 pixel column gap and 100px row gap.
By default the grid lines are named from 1 to whatever both down and up. Negative numbers designate the order in reverse, starting from the far sides and counting back toward the near side (negative numbers are not shown in the figure above).
Grid definitions position the content in Grid Child items on the grid. The grid is a flexible layout system designed to automatically fill out the space. It works in conjunction with flexbox in adapting layouts to available space.
Defining The Grid: Intrinsic or Extrinsic
Intrinsic sizing (content-driven). An intrinsic grid is one whose track sizes are governed by the contents of the grid items.
- Uses values like: auto, max-content, min-content, fit-content().
- The browser asks: “How big does this item want to be?”
- Example:
grid-template-columns: max-content auto;
Here, the first column will shrink or grow exactly to the widest intrinsic size of its content. The grid adapts to the items inside it. This is why it’s called intrinsic: the layout is determined from inside the items outward. Intrinsic sizing can cause the grid to “shrink-wrap” around content, leading to natural, content-friendly layouts. Intrinsic layouts can fall apart when the content has both wide and narrow items.That’s when subgrid can help.
Extrinsic sizing (container-driven) An extrinsic grid is one whose track sizes are defined by something outside the items — typically the grid container itself.
- Uses values like: fixed lengths (200px), percentages (30%), fractional units (1fr, 2fr), minmax() when bounded by container constraints.
- Example:
grid-template-columns: 200px 1fr 2fr;
Here, the grid tracks are determined by rules independent of what content wants. If content overflows, it either breaks, wraps, or scrolls, but it does not dictate the sizing. This is extrinsic: the layout flows from the outside container inward. Extrinsic sizing enables page-level consistency (e.g. a 12-column layout).
The magic of Grid is that you can combine intrinsic and extrinsic sizing in the same system. For example grid-template-columns: max-content 1fr minmax(150px, 25%); First column is determined by its content (intrinsic), Middle column takes up leftover space relative to container (extrinsic), and Last column is constrained between a minimum and maximum, balancing both.
Subgrid
When you place a grid inside of another grid, there is no relation between the parent and child grids. That becomes problematic when you want to align elements on the page. To fix that, sub grid was created. With grid-template-columns: subgrid; / grid-template-rows: subgrid; a child can inherit the tack definitions of its parent. That means alignment consistency:
- Nested elements can line up perfectly with items in the parent grid, without re-declaring identical columns/rows.
- Shared sizing: Tracks adapt together — if the parent grid column grows, the child subgrid column grows too.
- And true two-dimensional nesting: You can maintain the overall layout rhythm across multiple layers of components, instead of each being a little self-contained universe.
The following example shows how to turn a child of a parent CSS grid into a CSS grid that aligns with the parent using subgrid for grid-template-columns.
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 1rem;
}
.child {
display: grid;
/* child still has to be a grid */
grid-template-columns: subgrid;
/* inherit parent's columns */
}
When to Use Inline Grids
Block level grids display: grid provide control over the macro layout. Inline grids. Inline level grids display: inline-grid organizes text at the micro level, as in this example, or in buttons, badges, labels, icons, or controls.
Grid Template Columns/Rows and the Track List
once you have defined the parent, or grid container, with display: grid you need to define the grid. This is done with the grid-template-columns: track list where track list represents values for the track sizes, where the space between signifies grid lines. The track size can be a length, percentage, or fraction of the free space using the fr unit.
grid lines are automatically assigned positive numbers from these assignments starting from the first grid line, or negative starting from the last grid line. If you wish to use names for the row lines, you can insert square brackets in-between the track values. Notice that you can have more than one name, separated by spaces.
grid-template-columns: 50px 25% 1fr;grid-template-columns: 50px [charley row-1] 25% [susan row-2] 1fr;
If your definition has repeating parts, you can use the repeat() notation. The repeat() notation takes two arguments. Repeat count specifies the number of times the track list should be repeated. The second argument specifies the number of tracts that will be repeated. Each track size is either named, auto, or a fixed value:
- track-repeat
grid-template-columns: repeat(4, [charley] minmax(100px, 1fr) [beth]) - auto-repeat
grid-template-columns: repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) - fixed-repeat
grid-template-columns: repeat(4, [col-start] fit-content(200px) [col-end])
Parent and child Properties
Like FLexbox, there are properties that determine the parent box, the grid container, and properties to determine the way the children, the grid items, fit into the parent box.