Ensure Responsiveness for Web GUIs with CSS Grid Layouts

By Cristian Ionescu

https://www.htmlgoodies.com/beyond/css/ensure-responsiveness-for-web-guis-with-css-grid-layouts.html (Back to article)

By definition, a grid is a set of intersecting vertical and horizontal lines. The CSS Grid Layout Module is a specification for creating two-dimensional networks that provide a layout based on the grid, comprised of columns and rows, making it easier to design a web page. In other words, the grid provides a flexible way to move the position of the elements using only CSS without having to modify the HTML code.

This CSS grid system is flexible and stable, but when working with networks, it's good to keep in mind the following terms:

To begin the practical part of CSS Grid Layout, we will need a parent element and one or more child elements, followed by the grid or inline-grid, as you will see in the below examples:

Listing 1.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: PaleGoldenRod;
padding: 15px;
}
.grid-item {
background-color: WhiteSmoke;
border: 1px solid;
padding: 20px;
font-size: 50px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
<div class="grid-item">C</div>
<div class="grid-item">D</div>
<div class="grid-item">E</div>
<div class="grid-item">F</div>
<div class="grid-item">G</div>
<div class="grid-item">H</div>
<div class="grid-item">I</div>
</div>
<p>Display - GRID.</p>
</body>
</html>

Two other properties of the grid: the grid-template-columns and grid-template-rows. The grid-template-columns property specifies the number of columns in a grid, and grid-template-rows propriety specifies the height / grid layout.

Grid-columns

The vertical lines of the elements contained in a grid are called columns, and the grid-row - the lines on the horizontal of the elements are called rows, and the spaces between columns and rows are called gaps. You can adjust the spaces between columns and rows through the following properties:

Listing 2

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-gap: 60px;
grid-template-columns: auto auto auto;
background-color: PaleGoldenRod;
padding: 15px;
}
.grid-item {
background-color: whitesmoke;
border: 1px solid;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
<div class="grid-item">C</div>
<div class="grid-item">D</div>
<div class="grid-item">E</div>
<div class="grid-item">F</div>
<div class="grid-item">G</div>
<div class="grid-item">H</div>
<div class="grid-item">I</div>
</div>
<p>Adjusting space between columns and rows through the grid-gap property</p>
</body>
</html>

Row lines are called row lines and the lines between the columns are called column lines.

Listing 3. Rows

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: PaleGoldenRod;
padding: 15px;
}
.grid-container > div {
background-color: whitesmoke;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
<div class="item4">D</div>
<div class="item5">E</div>
<div class="item6">F</div>
<div class="item7">G</div>
<div class="item8">H</div>
</div>
<p>Paste the network element to line 1 and tell it to end in line 3</p>
</body>
</html>

CSS Grid Container

The CSS grid container consists of elements placed inside the rows and columns.

The grid-template-columns defines the number of columns in the grid and can give the width of each column, and the grid-template-row defines the height of each row.

Listing 4. The Grid-Template-Columns Property

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 90px 120px auto 50px;
grid-gap: 10px;
background-color: PaleGoldenRod;
padding: 15px;
}
.grid-container > div {
background-color: whitesmoke;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
</div>
<p>Specify the size of each column using the grid-template-column property</p>
</body>
</html>

The justify-content property: this property is used to align the entire contents / entire grid within the container.Justify-content can be: start, center, end, space-around, space-between, space-evenly.

The align-content property: this property is used to vertically align the grid content inside the container. Align-content can be: start, center, end, space-around, space-between, space-evenly.

Listing 5

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: PaleGoldenRod;
padding: 10px;
}
.grid-container > div {
background-color: whitesmoke;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
</div>

<p>Align the grid within the container with the align-content: CENTER </p> </body> </html>

The grid-column property: this property is used to define the columns where an element is placed. We can reference the line numbers, delimiting between values, or use "span" to define the number of columns in the element.

The grid-row property: this property is used to define the order in which an element is placed. We can also define the starting point of the element and the time the element will end.

The grid-area property: this property is used as a benchmark for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties. This function can also be used to name network elements.

Now, with the knowledge gained, let's make a layout:

Listing 6

<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
font-color: black solid;
font-family: "calibri";
}
.grid-container {
display: grid;
grid-template-columns: 0.18fr 10px 0.95fr;
grid-template-rows: auto 10px auto 10px auto 1px auto;
}
.grid-element {
background-color: # gray;
color: black;
padding: 15px;
font-size: 35px;
}
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: PaleGoldenRod;
}
.menu {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 6;
background: Bisque;
height:550px;
}
.main {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: BurlyWood;
height:550px;
}
.footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 8;
background: DarkSalmon;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-element header">Header</div>
<div class="grid-element menu">Menu</div>
<div class="grid-element main">Main</div>
<div class="grid-element footer">Footer</div>
</div>
</body>
</html>

Browser Support

In the Opera browser, to enable the grid layout option, navigate to: // flag and look for "activation platform experiment. In Internet Explorer - IE11 supports layout grid (with the -ms prefix). Firefox and Chrome have the CSS grid layout enabled as the default.

Conclusion

There is a real advantage to using the CSS Grid Layout mode. Why? Because we can make major changes to web layouts without touching the HTML markup. As a matter of fact, we can completely separate the HTML code from the layout.