loading...

CSS Grid Blog

johnstarman22358 profile image JohnStarman22358 Updated on ・2 min read

Introduction:

CSS grid is very useful in designing webpages, as it limits your use of floats and positioning. However, CSS grid is not a replacement for flex box, due to the fact that css grid is used for 2 dimensional layouts while flex box is used for one dimensional layouts. The picture below gives a great visual on the physical difference in the properties of Flexbox VS CSS grid.

CSS Grid DOESN'T replace flexbox!

Since CSS grid works on 2 dimensional layouts, it doesn't completely erase the use of flexbox. While using one dimensional layouts, one should definitely consider using flexbox because it is simply easier in my opinion. However, this is completely up to the developer themselves and it is their preference (only for one dimensional layouts).
Alt Text

Important Definitions and Terms:

Alt Text

Alt Text

Sources:

https://www.w3schools.com/css/css_grid.asp (Chart found via https://dev.to/welch/css-grid-illustrated-introduction-52l5)

Properties of CSS Grid:

Display

The grid value of the display property defines a CSS grid; determines types of boxes generated.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6erqm2z1wetv9mlfea0q.png)

Rows/Columns

In order to define rows/columns you need to use grid-template-rows and grid-template-columns. Changing the fractions of the page that you want your pictures to be helps develop a more progressional look for your webpage; 1 fr 1 fr 1 fr 1 fr is what was used for our webpage because we had 3 pictures in the column and needed them to be equally sized across the page.

Alt Text

Alt Text
(Pictured above is the page break of 1 fraction for each picture.)

Row/Column Gap

The gap property is used in order to determine how much space to leave between each picture after they are arranged in either rows or columns. You can change the amount of pixels depending on how big or small that you want the gap to be, we chose 25 pixels which generates the following:

Alt Text

https://media.geeksforgeeks.org/wp-content/uploads/02-1.png
Alt Text
As you may see in the image above, the 25 px gap is adequate for separating the images in the columns. If more separation was needed, 50 px would have been a better option.

Conclusion:

CSS grid is very useful when designing your website. Now that you have gone over the important functions of CSS Grid, it's now your turn to create a website!

Figma Model

Alt Text

Group Website

Alt Text
(More pictures which included in the website which use css grid, but wasn't able to fit into the snippet)
https://repl.it/@EthanAkers/CCS-Grid-Project#index.html

Discussion

pic
Editor guide