DEV Community

Adrian Kuper
Adrian Kuper

Posted on

CSS grid intro for WPF/XAML developers

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:

alt text

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:

alt text

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>
Enter fullscreen mode Exit fullscreen mode

The result:

alt text

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

XAML CSS grid
<Grid> <div id="foo"> + #foo { display: grid; }
*, 2* 1fr, 2fr
Auto auto
<RowDefinitions> grid-template-rows:
<ColumnDefinitions> grid-template-columns:
Grid.Row grid-row:
Grid.RowSpan grid-row-start: + grid-row-end:
Grid.Column grid-column:
Grid.ColumnSpan grid-column-start: + grid-column-end:

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.

Top comments (5)

Collapse
 
martinhaeusler profile image
Martin Häusler

Nice explanation!

Grid layouts are a godsend for serious layout building. Desktop environments had those for years, and it only took the web like... 10 years or so to copy-paste the idea? It's ridiculous if you think about it.

Collapse
 
kuperadrian profile image
Adrian Kuper

I agree. I love doing web dev, but before css grids I often struggled to align elements to my liking even with css frameworks like bootstrap. Naturally, I'm super glad to have css grids now, which finally make me feel confident in beeing able to build the ui the way i want it to look ;)

Collapse
 
thedevalchemist profile image
Satya Biswal

Thanks Adrian, for making it so simple.

Collapse
 
nssimeonov profile image
Templar++

I wish you combined the html and the css in one piece. Would be easier to understand and compare to XAML... or put them side by side somehow... now you have to scroll a lot.

Collapse
 
osethoum profile image
Oussama

Thank you for the explanation ❤