CSS Grid - Explicit vs Implicit Grid

Grid is a two-dimensional layout system for the web. It excels at combining the control that explicit sizing provides with the flexibility of implicit sizing, which makes it powerful and highly responsive for layouts. A grid will typically have columns, rows, and gaps (commonly referred to as gutters) between each of them.

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:

.grid {
  display: grid;
  /* Create column templates */
  /* Where the 1st item has 100px */
  /* and the 2nd item takes the remaining */
  grid-template-columns: 100px auto;
  /* Define column and row gutters */
  gap: 1rem;
}

.grid > div {
  border: 3px dotted black;
}

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:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Create row templates */
  /* Where the 1st row is explicitly */
  /* the rest will be defined implicitly by Grid */
  grid-template-rows: auto;
  /* Define a size for the implicitly defined tracks */
  /* Where they are all set to 100px instead of auto */
  grid-auto-rows: minmax(100px, auto);
  gap: 1rem;
}

.grid > div {
  border: 3px dotted black;
}

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.

<div class="grid">
  <div>avatar</div>
  <img src="https://avatars.githubusercontent.com/ekqt" alt="Hector Sosa" />
  <div>name</div>
  <div>Hector Sosa</div>
  <div>bio</div>
  <div>From 🇭🇳</div>
  <div>location</div>
  <div>Prague, Czech Republic</div>
</div>
<style>
  .grid {
    width: min(100% - 1rem, 30rem);
    margin: 4rem auto;
    font-family: monospace;
    /* Grid Styling */
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: minmax(50px, auto);
    gap: 1rem;
  }

  .grid>div {
    border: 1px solid lightgray;
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .grid>div:nth-child(odd) {
    text-align: right;
  }

  .grid>img {
    max-height: 100px;
    border-radius: 100%;
  }
</style>

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