Skip to content
This repository was archived by the owner on Nov 24, 2020. It is now read-only.

Commit 777f441

Browse files
Updates to code comments
1 parent 8d7a075 commit 777f441

File tree

1 file changed

+8
-7
lines changed

1 file changed

+8
-7
lines changed

vars-grid-layout.css

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
33
Created by Tracey Holinka (https://traceyholinka.com/) April 2017.
44
Version 1.0
5+
https://github.com/TraceyHolinka/css3-grid-pattern/
56
6-
Use CSS Custom properties to create the most common design grids.
7+
Use PostCSS custom properties to create the most common design grids.
78
89
CSS3 Grid is supported by:
910
Chrome 57+
@@ -12,16 +13,16 @@ IE 10+
1213
IOS Safari 10.3+
1314
Android Chrome 57+
1415
15-
IE does not have a gap property so the gaps are represented by a column. For example a 4 column mobile grid having 3 column gaps is represent by a total of 7 columns.
16+
IE10 & IE11 does not have a gap property so the gaps are represented by a column. For example a 4 column mobile grid having 3 column gaps is represent by a total of 7 columns.
1617
1718
1 column 1 gap 1 column 1 gap 1 column 1 gap 1 column
1819
1920
To represent 4 columns with whitespace gaps:
2021
21-
column 1: <code>grid-column: 1</code>
22-
column 2: <code>grid-column: 3</code>
23-
column 3: <code>grid-column: 5</code>
24-
column 4: <code>grid-column: 7</code>
22+
column 1: grid-column: 1
23+
column 2: grid-column: 3
24+
column 3: grid-column: 5
25+
column 4: grid-column: 7
2526
2627
This grid is fully responsive by using <code>fr</code> for columns while gaps are static. Mobile view are a 4 column grid. Tablet and above is a 12 column grid.
2728
@@ -171,4 +172,4 @@ This grid is fully responsive by using <code>fr</code> for columns while gaps ar
171172
align-self: center;
172173
}
173174
}
174-
175+

0 commit comments

Comments
 (0)