CSS Grid — Explicit vs Implicit Grid

What can you do with Grid?

1. You can choose how to size row and column tracks or have them react to the size of the content.
2. Direct children of the grid container will be automatically placed onto this grid, or place the items in the precise location that you want.
3. Lines and areas on the grid can be named to make placement easier.
4. Spare space in the grid container can be distributed between the tracks.
5. Grid items can be aligned within their area.

Creating a CSS Grid

Applying the display: grid CSS property to an HTML element creates a new grid formatting context for the direct children (referred to as grid items). You can define the line names and track sizing functions of grid columns and rows by using the CSS properties grid-template-columns and grid-template-rows. Let's review the following example .grid>div{Item $}*6, follow along using a CodePen pen.new:

Explicit vs. Implicit

Notice how we are explicitly defining the size of our columns by using grid-template-columns. By applying the CSS property grid-template-columns: 100px auto;, we are explicitly defining the 1st and 2nd column of our grid, then all of the remaining columns are explicitly defined the same.

So if we aren’t using grid-template-rows for our rows, how is Grid defining them? This is exactly how the explicit vs. the implicit grid works. By default, Grid is creating our row tracks (or any of the undefined tracks) implicitly and auto sizing them unless defined otherwise. To define a size for our implicit grid tracks we can use the CSS property grid-auto-columns and grid-auto-rows. Try the following change in our CSS:

You decide what makes sense to define explicitly or implicitly in your grid depending on your design needs. Before we even question how repeat() or minmax() work and what are CSS Functions, let's use create a real life example using what we've covered. Let's create a simple profile card.

Create a quick CodePen by going to pen.new, paste the snippet and try changing the grid-related CSS properties to experiment with them. This is just an example, notice the heavy use of <div/>, IRL make sure you make your best effort in writing Semantic HTML.

Originally published: CSS Grid — Explicit vs Implicit Grid