This post tries to explain the CSS grid feature to those, who are already familiar with the grid layout in WPF/XAML. The XAML grid layout is pretty cool, because it makes defining complex UIs pretty easy and straight-forward. With CSS on the other hand, I always felt the need the use CSS frameworks in order to somewhat feel confident in making properly looking UIs. But no more! CSS grids brought the awesomeness of the XAML grid layout to the web almost one-to-one, which makes building complex layouts with HTML + CSS manageable at last. So let's get started.

Example mock-up

Let's take a look at a simple mock-up for a comment entry form, which we will use as an example:

First we will see how to implement this using the XAML grid layout. Then we will build the same UI with HTML + CSS grids, in order to easily compare both methods.

Using XAML

Whenever I am presented a mock-up for a user interface I have to implement with XAML, I first try to figure out "the grid" of the interface and draw it into the mock-up. For our example, the grid could look like this:

From this point on translating this picture using the XAML grid layout is straightforward and should be understandable even for those, who don't really know about XAML:

<Grid>
    <!-- First, we define our grid -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="30" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- then we add all ui items at their respective position -->
    <Label Grid.Column="0" Grid.Row="0" Content="Name:" />
    <Label Grid.Column="1" Grid.Row="0" Content="Email:" />

    <TextBox Grid.Column="0" Grid.Row="1" />
    <TextBox Grid.Column="1" Grid.Row="1" />

    <Label Grid.Column="0" Grid.Row="2" Content="Comment:" />

    <!-- something like an text area -->
    <TextBox Grid.Column="0" 
             Grid.ColumnSpan="2" 
             Grid.Row="3"
             Height="200"
             TextWrapping="Wrap"
             AcceptsReturn="True" />

    <Button Grid.Column="1" Grid.Row="4" Content="Submit" />
</Grid>

The result:

And now with CSS grids

The cool thing about CSS grids is that they can be used remarkably similar to the XAML grid layout, which means if you are good with XAML you will be comfortable with CSS grids in no time.

First, let's take a look at the HTML that is necessary to replicate the UI we want to create:

<div id="container">
  <div id="name-label">Name:</div>
  <div id="email-label">Email:</div>

  <input id="name-txtbox" type="text" />
  <input id="email-txtbox" type="text" />

  <div id="comment-label">Comment:</div>

  <textarea id="comment-txtarea" rows=10></textarea>

  <button id="submit-btn" type="button">Submit</button>
</div>

Doesn't look complicated, but unlike XAML there is nothing about grids in the markup. Well, it's not called CSS grid for nothing. The rows and columns of the grid, and the position of the UI items inside the grid are all defined inside the css file:

/* "#" selects an item inside the html by their id */
#container {
  display: grid; /* with this we declare our container as a grid */

  grid-template-columns: 1fr 1fr; /* two columns, equal width */
  grid-template-rows: auto 30px auto auto 60px; /* 5 rows */
}

#name-label {
  grid-column: 1;
  grid-row: 1;
}

#email-label {
  grid-column: 2;
  grid-row: 1;
}

#name-txtbox {
  grid-column: 1;
  grid-row: 2;
}

#name-txtbox {
  grid-column: 2;
  grid-row: 2;
}

#comment-label {
  grid-column: 1;
  grid-row: 3;
}

#comment-txtarea {
  grid-column-start: 1;
  grid-column-end: span 2; /* span both columns */
  grid-row: 4;
}

#submit-btn {
  grid-column: 2;
  grid-row: 5;
}

First, we select our "container"-div element, declare it as a grid and set the rows and columns almost identically to XAML (1fr pretty much equals *, auto equals Auto and 30px and 60px are self-explanatory). After that we only have to select our UI items inside the grid and give them their place inside the grid using grid-column and grid-row.

Take a look at this CodePen I created to see the result.

To summarize, the following table comprehensively shows how certain elements known from the XAML grid layout "translate" into CSS grids:

Pretty easy, right? CSS grids allowed me to reuse the knowledge and experience I had with XAML grid layouts and finally made me feel comfortable in building complex UI layouts using HTML + CSS without the need for CSS frameworks like Bootstrap. Plus, they have some neat extra features that XAML grid layouts lack, e.g. named areas, which you should definitely check out. Once you're convinced by CSS grids and want to know all about them, take a look at this awesome and complete guide.