You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 24, 2020. It is now read-only.
Use CSS Custom properties to create the most common design grids.
7
+
Use PostCSS custom properties to create the most common design grids.
7
8
8
9
CSS3 Grid is supported by:
9
10
Chrome 57+
@@ -12,16 +13,16 @@ IE 10+
12
13
IOS Safari 10.3+
13
14
Android Chrome 57+
14
15
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.
16
17
17
18
1 column 1 gap 1 column 1 gap 1 column 1 gap 1 column
18
19
19
20
To represent 4 columns with whitespace gaps:
20
21
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
25
26
26
27
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.
27
28
@@ -171,4 +172,4 @@ This grid is fully responsive by using <code>fr</code> for columns while gaps ar
0 commit comments