CSS Grid Layouts

Georg Niess, Arwin Roubal, Stefan Thurner, Enrique Barba Roque

Graz University of Technology

A-8010 Graz, Austria

30 Nov 2019

Abstract
This paper aims to introduce a state-of-the-art way to layout web pages in CSS, introducing
CSS Grid. This work gives an introduction to CSS Grid and its most important principles,
properties, features and options, showcasing why Grid is recommended to use compared
to older techniques. Furthermore, this paper explores Grid Generators, including available
tools online and evaluating their usefulness. This paper introduces the latest browser tools
to examine the grid in the browser source inspectors. All things considered, this paper wants
to give an overview of a fairly new topic in web page layout design with CSS.

© Copyright 2019 by the author(s), except as otherwise noted.

This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence.
Contents

Contents i

List of Figures iii

List of Listings v

1 The History Of Layout In CSS 1

1.1 Float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 The New Way: CSS Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Features of CSS Grid Module 3

2.1 The Ease Of Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Automatic Placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Repeat Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.4 Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.5 Grid Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6 Template Columns and Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.7 Media Queries and CSS Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.8 Layering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.9 Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 CSS Grid Generators 11

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 CSS Grid Generator by Sarah Drasner . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3 Layoutit! By Leniolabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.4 Vue Grid Generator by Masaya Kazama . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4 Grid Debugging Tools 17

4.1 Firefox Grid Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.2 Chrome Grid Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.3 Gridman Grid Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Bibliography 21

i
ii
List of Figures

2.1 Example Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Various examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Desktop Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4 Tablet Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.5 Mobile Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.6 Grid Compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.1 CSS Grid Generator by Sarah Drasner . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.2 Layoutit! by Leniolabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3 Vue Grid Generator by Masaya Kazama . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.1 Firefox Grid Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.2 Chrome Grid Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3 Gridman Grid Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

iii
iv
List of Listings

2.1 Example Code Grid Repeat Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Example Code Grid Various. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Example Code Grid Repeat Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Example Code Grid Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.5 Example Code Grid Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6 Example Code Grid Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.7 Example Code Grid Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.8 Example Code Grid Media Query . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.1 Example code by CSS Grid Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.2 Example code by Layoutit! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Example code by Vue Grid Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

v
vi
Chapter 1

The History Of Layout In CSS

If one wants to understand which improvements CSS Grid brought and which issues it fixed, one first
needs to understand which layout-techniques existed before it and what problems they had to cope
with. Therefore, we want to give a quick introduction to historical methods to give an impression on
the evolvement of layout options in CSS. It is worth to mention that those techniques are not all that
‘historical’ themselves as they are still widely used all across the web as CSS Grid is fairly new.

1.1 Float
The early layouts in CSS used Floats. The main content was often given a margin to have space for placing
elements. In that time one could have elements on a website overflowing each other when increasing the
font size for example. But what is Floating? It is a CSS Method of positioning elements by moving them
as one would do with an image in Microsoft Word. If one uses the Float keyword in CSS the element
gets moved to the desired direction [Andrew 2017].
The float property can have following values:
• left - movement to the left

• right - movement to the right

• none - default, element does not float

• inherit - inherit parent value

[W3School 2019]
Now it is not difficult to see that the options here are limited. In comparison with its successors, the
weakness of float in regards to reordering elements becomes obvious. The strict dependence on HTML
source code order with no instruments at hand to layout in CSS only developers had to use hacky tricks
to achieve their results.

1.2 Flexbox
Many issues were fixed with the introduction of Flexbox. The so-called Flexible Box module brought
features that were designed for responsive web. When using Flexbox one makes the items in the parent
tag, called the flex container, stretch inside their container to adjust to screen size. These items are called
flex items and can be reordered in CSS without interfering with the HTML source code. Items can be
told to wrap into multiple lines with the "wrap" property.
However, one still needs a parent element inside the HTML that takes the role of the flex container.
Another downside is that one lays out items either in column or row. One can not control both in a single
Flexbox.

1
2 1 The History Of Layout In CSS

From this, it should be obvious that Flexbox is not designed for grid layouts. But in many cases,
designers want to lay out in two dimensions. Once again, workarounds were the only possibility to reach
desired results [Andrew 2017].

1.3 The New Way: CSS Grid

This is where CSS Grid comes in. The way of layouts in CSS Grid completely changes how Grid-
based user interfaces can be designed. Up to the introduction of CSS Grid, all attempts at lay outing
a two-dimensional page were basically hacks and failed to cover important functionality properly, like
responsiveness for instance [CSS-TRICKS 2016]. It is easy to use and responsive by design too. And of
course one can display page elements in any order, not depending in any way on the order described in
source code. But it is worth noting that disconnecting the visual display from source order can be used
for good and bad alike.
Chapter 2

Features of CSS Grid Module

The CSS Grid module has many useful features. These range from positioning to responsiveness and
layout changes. This chapter will take a look at the most import ones and give examples for them.

2.1 The Ease Of Positioning

With CSS Grid designing works by defining a grid and populating the cells with content afterwards. One
has many options on how to position content, there are many syntactical options, like properties that
take line numbers and can also span the content across multiple cells. All of this is CSS only, and not
dependent on any HTML code. Or one can use self-defined area names to assign content. There is an
own property, the "grid-area" property for this purpose. It is easy to see how powerful Grid is. One can
span across rows and columns, creating two-dimensional layouts [Andrew 2019].
The most basic one is to simply give a column start and endpoint definition and do the same for the
row. A screenshot of the following examples is shown in Figure 2.1 and the corresponding HTML code
can be seen in Listing 2.1.
grid-column-start : 2;
grid-column-end : 3;
grid-row-start : 1;
grid-row-end : 2;

Simple numbers are then used to choose the correct cell. This can be shortened further by using single
"/" for separation of the start and endpoint.
# positioning-with-grid .b {
grid-column : 2 / 3;
grid-row : 2 / 3;
}

The user can also define aliases instead of using numbers if preferred.
# positioning-with-grid .c {
grid-column : col 3;
grid-row : row 2;
}

To stretch an element over more than one cell, the "span" keyword can be used.
# positioning-with-grid .d {
grid-column : 1 / 2;
grid-row : 1 / span 2;
}

3
 4 2 Features of CSS Grid Module

1 <div class =" wrapper ">

2 <div class ="box a">A</div >
3 <div class ="box b">B</div >
4 <div class ="box c">C</div >
5 <div class ="box d">D</div >
6 <div class ="box e">E</div >
7 <div class ="box f">F</div >
8 </div >

Listing 2.1: This is the simple HTML code used in the examples of Section 2.1

Figure 2.1: This is a screenshot of the output of the examples of Section 2.1.

If space is a concern, the area can be defined in a single line sacrificing readability for space. The order
of the numbers is "row-start", "column-start", "row-end", and "column-end".
# positioning-with-grid .f {
grid-area : 1 / 3 / 2 / 4;
}

2.2 Automatic Placement

Not every element of a Grid must have a clear position defined. The way this is handled is by simply
filling up free space in the Grid layout with those undefined elements. This allows for dynamic content
placement and ordering without any intervention [Andrew 2019]. A screenshot of the output is shown in
Figure 2.2 and the corresponding HTML code in Listing 2.2.

2.3 Repeat Template

Columns and rows can also be defined by using the repeat keyword. This creates a space- and time-saving
method to place several rows or columns next to each other with the same size [Andrew 2019]. The
corresponding CSS code can be seen in Listing 2.3. A screenshot of the output is shown in Figure 2.2
and the corresponding HTML code in Listing 2.2.

2.4 Absolute Positioning

Elements can also be positioned absolutely in a CSS Grid. This is done by choosing an anchor position
that the element is grounded to. The attribute in question is "position: absolute"; the anchor can
then be chosen with for example the "top", "bottom", "left" or "right" properties [Andrew 2019]. The
 Absolute Positioning 5

Figure 2.2: This screenshot shows various features of Grid like absolute positioning and layering.

1 <div class=" wrapper ">

2 <div class="box a">First </div >
3 <div class="box b">Clocktower <br /><img src=" Clocktower .jpg" alt=" clocktower .jpg"
class=" clocktower " /></div >
4 <div class="box c">Middle </div >
5 <div class="box d">Background </div >
6 <div class="box e">Last Element </div >
7 <div class="box f">Front Element </div >
8 <div class="box g">Auto 1</div >
9 <div class="box h">Auto 2</div >
10 <div class="box i">Auto 3</div >
11 <div class="box j">Auto 4</div >
12 </div >

Listing 2.2: This is the simple HTML code used in various examples.

1 # grid-repeat . wrapper {
2 ...
3 grid-template-columns : repeat (5, [col] 12 rem ) ;
4 grid-template-rows : repeat (3, [row] auto );
5 }

Listing 2.3: In this example, a template is created with the repeat keyword allowing for a quick
formal layout.
 6 2 Features of CSS Grid Module

1 # grid-layering . clocktower {
2 ...
3 position : absolute ;
4 top: 1rem;
5 right : 1rem;
6 }

Listing 2.4: An Example of an image being positioned absolutely in a CSS Grid.

1 <div class =" wrapper ">

2 <div class ="box header ">Header </div >
3 <div class ="box sidebar ">Sidebar </div >
4 <div class ="box sidebar2 ">Sidebar 2</div >
5 <div class ="box content ">Content
6 Here is some long text that will fill this pretty broad element with stuff.</div
>
7 <div class ="box footer ">Footer </div >
8 </div >

Listing 2.5: This is the simple HTML code used for the responsive examples.

corresponding CSS code can be seen in Listing 2.4. A screenshot of the output is shown in Figure 2.2
and the corresponding HTML code in Listing 2.2.

2.5 Grid Area

Positioning can also be done using areas. Instead of just using numbers for enumerating, fixed names
can be created with the "grid-template-areas" attribute. The names are assigned simply by laying out
the aliases in a Grid-like way which is very intuitive. Areas can also span over multiple cells [Andrew
2019]. The corresponding CSS code can be seen in Listing 2.6. A screenshot of the output is shown in
Figure 2.5 and the corresponding HTML code in Listing 2.5.

2.6 Template Columns and Rows

In CSS Grid, instead of using pixels or rems, there are additional ways to define the size of columns
or rows. Size can be defined using percentages of the available space, or by using the auto attribute
which fills up the remaining space. Fractions can also be used instead to divide the space into several
parts [Andrew 2019]. The corresponding code for alle these features can be seen in Listing 2.7. A
screenshot of the output is shown in Figure 2.3 and the corresponding HTML code in Listing 2.5.
 Template Columns and Rows 7

Figure 2.3: This screenshot shows a Grid example in desktop layout.

Figure 2.4: This screenshot shows a Grid example in tablet layout.

1 # example . wrapper {
2 grid-template-areas :
3 " header header "
4 " sidebar content "
5 " sidebar2 sidebar2 "
6 " footer footer ";
7 }

Listing 2.6: Creating Areas is very intuitive and straightforward. The general Grid is simply laid out
by organizing the titles of the cells. To add an element, only the alias needs to be added.
 8 2 Features of CSS Grid Module

Figure 2.5: This screenshot shows a Grid example in mobile layout.

1 # example-template . wrapper {
2 grid-template-columns : 1fr 3fr 1fr;
3 grid-template-rows : 20% 40% auto;
4 grid-template-areas :
5 " header header header "
6 " sidebar content sidebar2 "
7 " footer footer footer ";
8 }
9
10 . header {
11 grid-area : header ;
12 }

Listing 2.7: Creating Areas is very intuitive and straightforward. The general Grid is simply laid out
by writing the aliases of the cells. To then add an element to a cell, only the alias needs
to included in its "grid-area" tag.
 Media Queries and CSS Grid 9

1 # media-queries . wrapper {
2 display : grid;
3 grid-template-areas :
4 " header "
5 " sidebar "
6 " content "
7 " sidebar2 "
8 " footer "
9 }
10
11 @media only screen and ( min-width : 40 rem) {
12 # media-queries . wrapper {
13 grid-template-columns : 1fr 3fr;
14 grid-template-areas :
15 " header header "
16 " sidebar content "
17 " sidebar2 sidebar2 "
18 " footer footer ";
19 }
20 }
21
22 @media only screen and ( min-width : 60 rem) {
23 # media-queries . wrapper {
24 grid-template-columns : 1fr 3fr 1fr;
25 grid-template-areas :
26 " header header header "
27 " sidebar content sidebar2 "
28 " footer footer footer ";
29 }
30 }

Listing 2.8: This is an example of a layout having three different versions for different screen sizes
using media queries.

2.7 Media Queries and CSS Grid

Media Queries can be used to check the screen size of the client and to make the layout responsive. This
is done by checking for min-width and then defining a new Grid layout. The default layout is simply
overwritten by the new one. This allows for drastic layout and even content order changes in a very
easy way. Websites can be fitted to different devices like mobile and desktop without much work or any
changes in the HTML. The corresponding code can be seen in Listing 2.8. A screenshot of the output is
shown in Figure 2.3, 2.4 and 2.5, and the corresponding HTML code in Listing 2.5.

2.8 Layering
Elements of a Grid can be layered on top of each other with the property "z-index". This adds a third-
dimension to layouts. The furthest back position would be at zero, and each increase by one is one layer
further to the front. This can also be nicely combined with transparencies. A screenshot of the output is
shown in Figure 2.2 and the corresponding HTML code in Listing 2.2.
# grid-layering .f {
z-index : 20;
}
10 2 Features of CSS Grid Module

Figure 2.6: This image shows the combatibility of different browsers with Grid [Can I use 2019].

This element is positioned "at z-index" 20, so it could have up to 20 different layers below it.

2.9 Browser Support

There is support for Grid in Chrome, Firefox and Safari since March 2017. Edge was a bit late but shipped
support October 2017. There are of course still older browsers that do not support grid [Andrew 2019].
But it really should not be an issue. First of all, the userbase of today is much more likely to use up to
date browsers and get regular updates than data from ten years ago would suggest. One has to make sure
to make the right assumptions when talking numbers here. And new CSS might become usable far faster
than one would expect when starting a project [Andrew 2017].
Furthermore, old browsers will simply ignore properties in CSS that they do not understand. This
means that one only needs to add feature queries to properties that are not exclusive to CSS Grid to ensure
support on older browsers. In most cases, one will only need to overwrite properties such as width or
margin. Support for feature queries themselves is also very good [Matuzović 2017].
An overview of Grind compatibility is shown in Figure 2.6
Chapter 3

CSS Grid Generators

In former chapters, CSS Grid was discussed in general. How it developed over time from CSS Float
to more modern approaches. The workflow has been shown, different examples about how to use it
efficiently were presented and CSS Grid has been compared to older methods like Float and Flexbox.
Another part of this report was the discussion of Grid debugging for different Browsers, which should help
web developers working with the Grid. The last topic of this paper will be a discussion and comparison
of different Grid generating tools.

3.1 Introduction
Grid generators are a graphical tool for web developers. They are a convenient tool for creating a web
page layout with CSS Grid and offer an intuitive and interactive method for designing a basic Grid layout.
Instead of writing CSS and HTML code in separate files, such generators support the creation of a basic
layout graphically and translate it to HTML and CSS code. This way design decisions can be tested
and evaluated before applying to a real web page. Manipulating elements in these graphical tools is also
very easy and intuitive. When the result is acceptable, the corresponding CSS and HTML code can be
downloaded for further operational steps. After this short theoretical introduction, the next logical step
is to present some selected tools which illustrate the now discussed properties.

3.2 CSS Grid Generator by Sarah Drasner

This first discussed generator offers basic but efficient functionalities for creating a first CSS Grid layout
[Drasner 2019]. A screenshot of the interface is shown in Figure 3.1 and the corresponding code can be
seen in Listing 3.1. Numbers of columns and rows can be defined and sized with fractions. Column and
row gaps can also be included using pixels. After a basic grid is defined, elements can be added to it
by clicking the corresponding areas in the graphical representation. It is also possible to create elements
which stretch across multiple rows or columns by dragging across them. However, this method can get
ponderous fast and overlapping elements may confuse inexperienced Grid users. Another weakness is
that the grid areas and the elements within it cannot be named directly inside the tool, it is necessary to
change this manually in the corresponding code. Aside from this basic functionality, CSS Grid Generator
does not offer any other more complex functions, but it is a great starting point for getting introduced
to CSS Grid layout and for learning basic use cases. Another advantage is that it is available in offline
mode, so it is possible to save this website locally.
This tool is still new and aside from some basic functions, it does not offer much now. Nevertheless,
being an open-source software in active development, more features may get added in the future and
complex functionalities might find their way into this project.

11
12 3 CSS Grid Generators

1 HTML:
2
3 <div class =" parent ">
4 <div class =" div1"> </div >
5 <div class =" div2"> </div >
6 <div class =" div3"> </div >
7 <div class =" div4"> </div >
8 <div class =" div5"> </div >
9 </div >
10
11
12 CSS:
13
14 . parent {
15 display : grid;
16 grid -template - columns : 1fr 4fr 1fr;
17 grid -template -rows: 1fr 4fr 1fr;
18 grid -column -gap: 0px;
19 grid -row -gap: 0px;
20 }
21 .div1 { grid -area: 2 / 2 / 3 / 3; }
22 .div2 { grid -area: 1 / 1 / 2 / 4; }
23 .div3 { grid -area: 3 / 1 / 4 / 4; }
24 .div4 { grid -area: 2 / 1 / 3 / 2; }
25 .div5 { grid -area: 2 / 3 / 3 / 4; }

Listing 3.1: Example code generated by CSS Grid Generator for corresponding layout shown in
Figure 3.1.

Figure 3.1: Interface of CSS Grid Generator by Sarah Drasner

Layoutit! By Leniolabs 13

Figure 3.2: Interface of Layoutit! by Leniolabs

3.3 Layoutit! By Leniolabs

Layoutit! is another very intuitive tool for creating a Grid layout [Leniolabs LLC 2019]. It offers some
more complex functions and works a more intuitive way as the CSS Grid Generator. A screenshot of
the interface can be seen in Figure 3.2 and the corresponding code is shown in Listing 3.2. The basic
functionality is very similar to the CSS Grid Generator by Sarah Drasner. Rows and columns can be
defined in the sidebar, which can be sized with fractions, "Like in the first tool, elements can be added by
simply clicking and dragging inside the graphical area. However, these tools work much more natural,
solid and less vulnerable for bugs.
This tool also offers some advantages compared to the last one. For instance, it uses Grid areas to
describe the general layout, which enables more control over the page design, as already described in
former chapters of this paper. Layoutit! is also able to create more complex designs using nested Grids.
As the CSS Grid Generator by Sarah Drasner, Layoutit! is also available in offline mode. Overall
Layoutit! offers some handy features which really enhances the process of designing a general page
layout. It works in a more intuitive way and it feels solid in its functionality.

3.4 Vue Grid Generator by Masaya Kazama

The third and last tool which should be discussed is the Vue Grid Generator created by Masaya Kazama
[Kazama 2019]. It is yet another tool for generating Grids in a graphical way. A screenshot of the
interface is presented in Figure 3.3 where the corresponding code is shown in Listing 3.3.
Created with the library vue.js, this generator is very similar to Layoutit! concerning its functionality.
The Grid layout is defined by adding elements vertically or horizontally and their size can be further
described with fractions, "A unique feature of this tool is the possibility to use presets and to import or
export layouts directly. It is also very useful that the HTML code, as well as the CSS code, are displayed
next to the graphical representation. However, it is not synchronized in both directions, which means that
the presented code cannot be manipulated directly.
Overall the Vue Grid Generator is a good tool with the most features out of the three here discussed
generators. Plus, it offers some useful functions, that could be interesting depending on personal
preferences and desires. A little downside is the fact, that it does not work in offline mode. However, the
newest version of the build can be downloaded on the GitHub Account of Masaya Kazama.
14 3 CSS Grid Generators

1 HTML:
2
3 <div class="grid - container ">
4 <div class=" Header "></div >
5 <div class="Main -Area">
6 <div class="Text -Area"></div >
7 <div class="Image -Area"></div >
8 </div >
9 <div class=" Sidebar "></div >
10 <div class=" Navigation "></div >
11 <div class=" Footer "></div >
12 </div >
13
14
15 CSS:
16
17 .grid - container {
18 display : grid;
19 grid -template - columns : 1fr 3fr 2fr 1fr;
20 grid -template -rows: 1fr 4fr 1fr;
21 grid -template -areas: " Header Header Header Header " " Sidebar Main -Area
Main -Area Navigation " " Footer Footer Footer Footer ";
22 }
23
24 . Header { grid -area: Header ; }
25
26 .Main -Area {
27 display : grid;
28 grid -template - columns : 1fr 1fr 1fr;
29 grid -template -rows: 1fr 1fr;
30 grid -template -areas: "Text -Area Text -Area Image -Area" "Text -Area Text -
Area Image -Area";
31 grid -area: Main -Area;
32 }
33
34 .Text -Area { grid -area: Text -Area; }
35
36 .Image -Area { grid -area: Image -Area; }
37
38 . Sidebar { grid -area: Sidebar ; }
39
40 . Navigation { grid -area: Navigation ; }
41
42 . Footer { grid -area: Footer ; }

Listing 3.2: Example code generated by Layoutit! for corresponding layout shown in Figure 3.2.
Vue Grid Generator by Masaya Kazama 15

1 HTML:
2
3 <div class=" container ">
4 <div class=" header ">header </div >
5 <div class=" navbar ">navbar </div >
6 <div class="left">left </div >
7 <div class="main">main </div >
8 <div class="right">right </div >
9 <div class=" footer ">footer </div >
10 </div >
11
12
13 CSS:
14
15 . container {
16 display : grid;
17 width: 100%;
18 height : 100%;
19 grid -template -areas: " header header header "
20 " navbar navbar navbar "
21 "left main right"
22 " footer footer footer ";
23 grid -template - columns : 1fr 4fr 1fr;
24 grid -template -rows: 1fr 1fr 4fr 1fr;
25 }
26 . container > div {
27 border : 1px dashed #888;
28 }
29
30 . header {
31 grid -area: header ;
32 }
33 . navbar {
34 grid -area: navbar ;
35 }
36 .left {
37 grid -area: left;
38 }
39 .main {
40 grid -area: main;
41 }
42 . right {
43 grid -area: right;
44 }
45 . footer {
46 grid -area: footer ;
47 }

Listing 3.3: Example code generated by Vue Grid Generator for corresponding layout shown in
Figure 3.3.
16 3 CSS Grid Generators

Figure 3.3: Interface of Vue Grid Generator by Masaya Kazama

3.5 Conclusion
Starting with CSS Grid can be irritating when older approaches of CSS are still omnipresent. The
advantages of these new methods were discussed in this paper and Grid generators are a great introduction
to CSS Grid in general. Most of the generator tools are very similar in their usability and functionality,
they differ just in minor features. Some are more intuitive concerning their graphical representation,
some offer additional features as presets. Which one of the tools should be recommended depends on
the individual needs of a web developer. Overall CSS Grid generators are a good way to experiment with
CSS Grid they are a great tool for inexperienced users. However, their restrictive possibilities make these
tools irrelevant for veteran web developers and more experienced users.
Chapter 4

Grid Debugging Tools

This chapter will take a look at inspector tools some browsers offer for working and debugging the Grids
built for a website, and their different features will be studied and compared.
To the date, only Mozilla Firefox and Google Chrome have some sort of feature in their inspectors
related to Grids, albeit there is also a Chrome extension for Grid inspection that will be studied too.

4.1 Firefox Grid Inspector

Firefox has the inspector with the most features for debugging Grids [Mozilla 2019]. It can be accessed
from the standard inspector interface, where a tab for Grid inspection can be found under the section
"Layout". There, a list for the containers with the property "display:grid" on the page can be found. The
containers selected in that list will be highlighted with the desired colours as seen in Figure 4.1. Then,
multiple display options can be selected:
• Display line numbers, which shows the columns and row numbers that would apply for establishing
the span of the elements in the properties "grid-column" and "grid-row".

• Display area names, that would display the name of the areas over them if these were defined.

• Extend lines infinitely, property that extends the row and column lines to the end of the viewport in
order to visualize possible extensions for the Grid or alignment with other elements.
It is also important to notice that these display options will apply for all the currently selected Grids,
with no possibility to choose different configurations for each Grid.
Additionally, when only one Grid is selected for display, the inspector will also show a diagram of the
Grid, and hovering over a Grid area in it, the area from the actual Grid will be highlighted.
More importantly, any changes done to the CSS properties of the elements through the inspector will
also reflect in the Grid section of it. This allows the immediate visualization of modifications in the Grid.
The Grid panel was added in version 56 of Firefox, released in September 2017.

4.2 Chrome Grid Inspector

This inspector offers more basic features. For this browser, when the code of an element of the Grid
is selected through the inspector, the Grid that contains it will be marked with dotted lines as shown in
Figure 4.2.
This functionality was added to the inspector with Chrome v62 in October 2017.

17
18 4 Grid Debugging Tools

Figure 4.1: Firefox Grid Inspector

Figure 4.2: Chrome Grid Inspector

Gridman Grid Inspector 19

Figure 4.3: Gridman Grid Inspector

4.3 Gridman Grid Inspector

Gridman is an extension for Google Chrome that adds a grid inspector functionality [Anton Savinskiy
2019]. When active, the Grid selected by the mouse will be highlighted with red lines, similar to the
Chrome Grid inspector. A screenshot of this extension can be seen in Figure 4.3.
This extension was released before Chrome v62 (the Chrome Web Store does not show the release date,
but the oldest review is from August 2017), so, when the Chrome inspector got released, this extension
got deprecated.
20 4 Grid Debugging Tools
Bibliography

Andrew, Rachel [2017]. The New CSS Layout. A Book Apart, 02 Oct 2017. ISBN 1-93-755768-5 (cited on
pages 1–2, 10).
Andrew, Rachel [2019]. Grid by Example - Everything you need to learn CSS Grid Layout. 01 Dec 2019.
https://gridbyexample.com/ (cited on pages 3–4, 6, 10).

Anton Savinskiy [2019]. Gridman - CSS Grid inspector. Ultra Fast! 01 Dec 2019. https : / / chrome .
google.com/webstore/detail/gridman-css-grid-inspecto/cmplbmppmfboedgkkelpkfgaakabpicn (cited on
page 19).
Can I use [2019]. CSS Grid Layout (level 1). 01 Dec 2019. https://caniuse.com/#feat=css-grid (cited
on page 10).
CSS-TRICKS [2016]. A Complete Guide to Grid. 06 Nov 2016. https://css-tricks.com/snippets/css/
complete-guide-grid/ (cited on page 2).

Drasner, Sarah [2019]. CSS Grid Generator. 01 Dec 2019. https://cssgrid- generator.netlify.com/
(cited on page 11).
Kazama, Masaya [2019]. CSS Grid Layout. 01 Dec 2019. https://github.com/miyaoka/grid-generator
(cited on page 13).
Leniolabs LLC [2019]. Layoutit. 01 Dec 2019. https://grid.layoutit.com/ (cited on page 13).
Matuzović, Manuel [2017]. Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid.
Smashing Magazine. 24 Jul 2017. https://smashingmagazine.com/2017/07/enhancing- css- layout-
floats-flexbox-grid/ (cited on page 10).

Mozilla [2019]. Introduction to CSS Grid Layout - Firefox DevTools. 01 Dec 2019. https : / /
mozilladevelopers.github.io/playground/css-grid/03-firefox-devtools/ (cited on page 17).

W3School [2019]. CSS Layout - float and clear. 01 Dec 2019. https://css-tricks.com/snippets/css/
complete-guide-grid/ (cited on page 1).

21