How to design a web page using CSS grid properties

When we are creating a web page, we must consider the way the content is arranged, the user’s attractiveness, clarity, and ease of creation. Grid is an easy method to create a web page without floats and positioning. The grid layout mainly consists of rows and columns. Here I’m going to consider some of the grid properties required to create a grid layout.

The “display” Property

We use grid value or inline-grid value of the display property to define a grid.

.container {display: grid;}

Grid Gap

Gaps are the spaces between each column and row.

We can adjust these grid gaps using grid-column-gap, grid-row-gap, or grid-gap properties.

.container {display: grid;grid-row-gap: 50px; //row gap 50pxgrid-column-gap: 10px; //column gap 10px}

Also, we can use the grid-gap property instead of the above properties.

.container {display: grid;grid-gap: 50px 10px; // row gap 50px and column gap 10px}

The “grid-template-columns” Property

Grid-template-columns Property is used to define the number of columns in the grid layout and the width of each column. We can give any length unit or a percentage to this grid-template-column value. Also, we can use “auto” or “fr” unit.

.container {display: grid;grid-template-columns: 200px auto auto 550px;}

We can create flexibly row and column using “fr” units. The “fr” unit distributes the available space in the grid container, not all space.

.container {display: grid;grid-template-columns: 2fr 1fr 1fr 3fr;}

The “grid-template-rows” Property

Grid-template-rows Property is used to define the height of each row in the grid layout.

.container {display: grid;grid-template-rows: 80px 160px;}

The “grid-column” property

When we want to define in which column an item should be placed, we use the grid-column property. What is done here is to define the starting point and the ending point of an item. We can do it in two ways, using the line numbers or keyword “span”.

.grid-item1 {grid-column: 1 / 4; //Item 1 starts on column 1 and ends before column 4}
.grid-item2 {grid-column: 2 / span 3; //Item 2 starts on column 2 and span 3 columns}

The “grid-row” property

When we want to define in which row an item should be placed, we use the grid-row property. What is done here is to define the starting point and the ending point of an item. We can do it in two ways, using the line numbers or keyword “span”.

.grid-item1 {grid-row: 1/ 3; //Item 1 starts on row 1 and ends before row 3}

or

.grid-item1 {grid-row: 1/ span 2; //Item 1 starts on row1 and span 2 rows}

The “grid-area” Property

We can use grid-area Property instead of grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties. Also, it can be used to assign names to grid items.

.grid-item4 {grid-area: 1 / 2 / 3 / 6; //Item 4 starts on row 1 and column 2, and end on row 3 and column 6}

or

.grid-item4 {grid-area: 1 / 2 / span 2 / span 4; //Item 4 starts on row 1 and column 2, and span 2 rows and span 4 columns}

The “grid-area-template” property

The grid-area-template property can contain named grid items of the grid container. Each row is defined by apostrophes and each column is defined by inside the apostrophes, separated by a space.

.grid-item1 { grid-area: header; }.grid-item2 { grid-area: menu; }.grid-item3 { grid-area: main; }.grid-item4 { grid-area: right; }.grid-item5 { grid-area: footer; }.container {display: grid;grid-template-areas:‘header header header header header header’‘menu main main main right right’‘menu footer footer footer footer footer’;}

Full HTML CSS code for above template

<!DOCTYPE html><html><head><style>.grid-item1 { grid-area: header; }.grid-item2 { grid-area: menu; }.grid-item3 { grid-area: main; }.grid-item4 { grid-area: right; }.grid-item5 { grid-area: footer; }.container {display: grid;grid-template-areas:‘header header header header header header’‘menu main main main right right’‘menu footer footer footer footer footer’;grid-gap: 20px;background-color: #7c0842;padding: 10px;}.container > div {background-color: rgba(255, 255, 255, 0.8);text-align: center;padding: 20px 0;font-size: 30px;}</style></head><body><div class=”container”><div class=”grid-item1">Header</div><div class=”grid-item2">Menu</div><div class=”grid-item3">Main</div><div class=”grid-item4">Right</div><div class=”grid-item5">Footer</div></div></body></html>

Conclusion

Here are just a few basic grid properties you can use to create a grid layout. In addition, there are many other types of grid properties in CSS and you can use all of them to make your web page more creative.

……………………………………………………………………………..

Hope you enjoyed my article and think this would be helpful for you to know something about CSS grid properties.

Thank You!

References

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nipuni Premadasa

Nipuni Premadasa

Undergraduate at Faculty of Information Technology, University of Moratuwa, Sri Lanka