CSS3 provides several new ways to do layout. The easiest is multiple columns within an element. It’s easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. Using media queries a small screens gets one column, tablets get two and computer monitors get three or more columns.

Multi-Columns Interactive

CSS Grid is revolutionary. Up to 2018, the exploration of web layout strategies has been along the lines of a word processor. You start at the top and create content vertically as elements stack like blocks, which is easy, and horizontally, by limiting the width of the elements so you can go from left to right. The activity of designing web pages as if one were designing in Microsoft Word has come to an end! CSS Grid is here! You create the grid and then populate it in any way and in any order you see fit, creating white space wherever you deem esthetically pleasing or communicatively correct.

Allow Massimo Vignelli to introduce grids.

Grids

For us Graphic Design is “organization of information.” There are other types of graphic design more concerned with illustration or of a narrative nature. Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.

There are infinite kinds of grids but just one – the most appropriate – for any problem. Therefore, it becomes important to know which kind of grid is the most appropriate. The basic understanding is that the smaller the module of the grid the least helpful it could be. We could say that an empty page is a page with an infinitesimal small grid. Therefore, it is equivalent to not being there. Conversely, a page with a coarse grid is a very restricting grid offering too few alternatives. The secret is to find the proper kind of grid for the job at hand. Sometimes, in designing a grid we want to have the outside margins small enough to provide a certain tension between the edges of the page and the content. After that, we divide the page in a certain number of columns according to the content, three, two, four, five, six, etc. Columns provide only one kind of consistency but we also need to have a horizontal frame of reference to assure certain levels of continuity throughout the publication. Therefore, we will divide the page from top to bottom in a certain number of Modules, four, six, eight, or more, according to size and need. Once we have structured the page, we will begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. There are infinite ways of doing this and that is why the grid is a useful tool, rather than a constricting device. However, one should learn to use it so as to retrieve the most advantageous results.

Vignelli has plenty to say about grids, margins, columns, and modules in his book The Vignelli Canon (pages 40 to 53) He provides a clear illustration of how to use a grid. Grid for the web is similar enough, except it is not just an organization principle but a layout tool. You will learn to use the CSS grid by using it.

Massimo Vignelli concludes his Canon with the power of white space.

WHITE SPACE

I often say that in typography the white space is more important than the black of the type. The white space on the printed page is the correspondent of space in architecture. In both situations space is what qualifies the context. Naturally, the organization of information needs a structure to hold together, but one should not underestimate the importance of white space to better define the hierarchy of every component. White space, non only separates the different parts of the message but helps to position the message in the context of the page. Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page. Tight type setting transforms words into lines just as loose type settings transform words in to dots. Decreasing or increasing the letter spacing (kearning) confers very distinctive character and expression to the words. All this is space manipulation and it is this device that is used in layouts to achieve a desired expression. The relationship between the size of type and the space around it is one of the most delicate and precious elements of a composition. I must say that the masterful handling of white space on a printed page is perhaps the most peculiar attribute of American graphic design. Just like space is the protagonist in Frank Lloyd Wright’s architecture. Somehow, it relates to the epic grandeur of the American landscapes.

For many artists white space is the essential element of the composition. It is the fundamental qualifier and protagonist of the image. Almost all the great American graphic designers have used white space as the significant silence to better hear their message loud and clear.

Such is indeed the power of the white space.

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.

Parent Properties

Child Properties