What is Grids?

Description about the page including the reason for page / project. Selection and code to be made available to anyone who comes across the page and wants it.

1
2
3
4
5
6

Regular Grids

Description about the page including the reason for page / project. Selection and code to be made available to anyone who comes across the page and wants it.

This is the 1st div in the grid and can be expanded by using the grid-column: span ? function inside the CSS file.

This can also be used for the number of rows with grid-row: span ? function.

The grid can be designed to have specific named areas that classes can be attached to using the grid-template-areas: "name name2" function.

1
2
3
4
5
6
7
8
9
10
11
12

Masonary Grids

Masonary grids have become very popular in displaying images , blocks of text or cards. Some of the most common places to see this would be Pinterst.

Using Basic CSS

There are a number of ways you can create a masonary effect ussing CSS. A super simple way is by using the colums: 3; pseudo-class. The example below uses this method:

one two three four five six seven eight nine ten

Variable Grids

Description about the page including the reason for page / project. Selection and code to be made available to anyone who comes across the page and wants it.

eleven twelve thirteen eighteen fourteen fifteen sixteen seventeen