CSS Grid - Explicit vs Implicit Grid
Tags: css, beginners, tutorial
Published: 2022-10-05 12:21:51

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](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) and [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). Let's review the following example `.grid>div{Item $}*6`, follow along using a CodePen [pen.new](https://pen.new):

```css
.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](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) and [grid-auto-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). Try the following change in our CSS:

```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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions), let's use create a real life example using what we've covered. Let's create a simple profile card.

```html
<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](https://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](https://web.dev/learn/html/semantic-html/).

Originally published: [CSS Grid - Explicit vs Implicit Grid](https://hectorsosa.me/blog/css-grid---explicit-vs-implicit-grid-ekrgD)