css-grid.md

   1 ---
   2 title: CSS Grid
   3 category: CSS
   4 updated: 2019-08-23
   5 layout: 2017/sheet
   6 prism_languages: [css]
   7 ---
   8
   9 ### Container
  10
  11 ```css
  12 .grid-container {
  13 ```
  14 {: .-setup}
  15
  16 ```css
  17   /* Display properties */
  18   display: grid;
  19   display: inline-grid;
  20   display: subgrid;
  21 ```
  22
  23 ```css
  24   /* Columns and rows */
  25   grid-template-columns: 1rem 2rem 1rem; /* Measurement units */
  26   grid-template-columns: 25% 50% 25%; /* Percentage units */
  27   grid-template-columns: 1rem auto 1rem 2fr; /* Fill remaining widths with auto or fr units */
  28   grid-template-columns: repeat(12, 1fr); /* Repeat columns without needing to write them */
  29
  30   grid-template-rows: 1rem 10% auto repeat(5, 10px); /* Mix any group, same rules work for rows */
  31 ```
  32
  33 ```css
  34   /* Automatic columns and rows */
  35
  36   grid-auto-columns: 10px; /* No matter how many columns of content end up in the grid, each column will be this same width */
  37   grid-auto-rows: 1rem; /* No matter how many rows of content end up in the grid, each row will be this same height */
  38 ```
  39
  40 ```css
  41   /* Areas */
  42   grid-template-areas:
  43     "header header"
  44     "main aside"
  45     "footer footer"; /* Grid-style */
  46
  47   grid-template-areas: "header header" "main aside" "footer footer"; /* Inline-style */
  48 ```
  49
  50 ```css
  51   /* Template shorthand */
  52   grid-template:
  53     "header header" auto
  54     "main aside" 100vh
  55     "footer footer" 10rem
  56     / 80% 20%;
  57
  58   /* The above is the same as below long-hand */
  59   grid-template-columns: 80% 20%;
  60   grid-template-rows: auto 100vh 10rem;
  61   grid-template-areas:
  62     "header header"
  63     "main aside"
  64     "footer footer";
  65 ```
  66
  67 ```css
  68   /* Gaps */
  69   grid-row-gap: 1rem;
  70   grid-column-gap: 0.5rem; /* Define values separately */
  71
  72   grid-gap: 1rem 0.5rem; /* Short-hand for row / column */
  73   grid-gap: 1rem; /* Gap in both dimensions */
  74 ```
  75
  76 ```css
  77   /* Item justification (horizontal or column alignment) */
  78   justify-items: start; /* Align items to the left */
  79   justify-items: center; /* Align items centered within its column */
  80   justify-items: end; /* Align items to the right */
  81   justify-items: stretch; /* (default) Fills available area (horizontally) */
  82 ```
  83
  84 ```css
  85   /* Item alignment (vertical or row alignment) */
  86   align-items: start; /* Align items to the top */
  87   align-items: center; /* Align items centered within its row */
  88   align-items: end; /* Align items to the bottom */
  89   align-items: stretch; /* (default) Fills available area (vertically) */
  90 ```
  91
  92 ```css
  93   /* Place item shorthand */
  94   place-items: start stretch;
  95
  96   /* The above is the same as below long-hand */
  97   align-items: start;
  98   justify-items: stretch;
  99 ```
 100
 101 ```css
 102   /* Content justification (horizontal or column alignment) */
 103   justify-content: start; /* Align content to the left */
 104   justify-content: center; /* Align content centered horizontally within the grid */
 105   justify-content: end; /* Align content to the right */
 106   justify-content: stretch; /* (default) Fills available area (horizontally) */
 107
 108   justify-content: space-around; /* Chooses a space for both sides of the columns like a left and right margin */
 109   justify-content: space-between; /* Chooses a space to go between columns, no margins on outside of content */
 110   justify-content: space-evenly; /* Chooses a space that goes between all columns and edges consistently */
 111 ```
 112
 113 ```css
 114   /* Content alignment (horizontal or column alignment) */
 115   align-content: start; /* Align content to the top */
 116   align-content: center; /* Align content centered vertically within the grid */
 117   align-content: end; /* Align content to the bottom */
 118   align-content: stretch; /* (default) Fills available area (vertically) */
 119
 120   align-content: space-around; /* Chooses a space for the top and bottom of the rows like a top and bottom margin */
 121   align-content: space-between; /* Chooses a space to go between rows, no margins on outside of content */
 122   align-content: space-evenly; /* Chooses a space that goes between all rows and edges consistently */
 123 ```
 124
 125 ```css
 126   /* Place item shorthand */
 127   place-content: center start;
 128
 129   /* The above is the same as below long-hand */
 130   align-content: center;
 131   justify-content: start;
 132 ```
 133
 134 ```css
 135   /* Automatic grid positioning */
 136
 137   grid-auto-flow: row; /* Left-to-right rows, then top-to-bottom*/
 138   grid-auto-flow: column; /* Top-to-bottom columns, then left-to-right */
 139   grid-auto-flow: dense; /* Responds with best-guess on left-to-right, top-to-bottom order with advanced layouts */
 140 ```
 141
 142 ```css
 143   /* There is one final shorthand for all container properties in one */
 144
 145   /* Explicit grid columns, rows, and areas */
 146   grid:
 147     "header header" auto
 148     "main aside" 100vh
 149     "footer footer" 10rem
 150     / 80% 20%; /* You can include a template as the only value, which is equivalent to below */
 151   grid-template:
 152     "header header" auto
 153     "main aside" 100vh
 154     "footer footer" 10rem
 155     / 80% 20%; /* Which is again equivalent to below */
 156   grid-template-columns: 80% 20%;
 157   grid-template-rows: auto 100vh 10rem;
 158   grid-template-areas:
 159     "header header"
 160     "main aside"
 161     "footer footer";
 162
 163   /* Automatic grid flows */
 164   grid: 1rem / auto-flow dense 1fr; /* You can include rows, a flow, and automatic columns, which is equivalent to below */
 165   grid-template-rows: 1rem;
 166   grid-auto-flow: dense;
 167   grid-auto-columns: 1fr;
 168
 169   grid: auto-flow dense 1rem / repeat(10, 10%); /* Conversely, you can do the same thing with automatic rows, and defined columns */
 170   grid-auto-flow: dense;
 171   grid-auto-rows: 1rem;
 172   grid-template-columns: repeat(10, 10%);
 173 ```
 174
 175 ```css
 176 }
 177 ```
 178 {: .-setup}
 179
 180 ### Child
 181
 182 ```css
 183 .grid-child {
 184 ```
 185 {: .-setup}
 186
 187 ```css
 188   /* Column position */
 189   grid-column-start: 1;
 190   grid-column-end: 2;
 191
 192   grid-column: 1 / 2; /* Short hand */
 193   grid-column: 1 / span 2; /* Span 2 columns without explicitly defining an endpoint */
 194   grid-column: 1; /* Start in and occupy a single column */
 195 ```
 196
 197 ```css
 198   /* Row position */
 199   grid-row-start: 2;
 200   grid-row-end: 4;
 201
 202   grid-row: 2 / 4; /* Short hand */
 203   grid-row: 2 / span 3;/* Span 3 rows without explicitly defining an endpoint */
 204   grid-row: 1; /* Start in and occupy a single row */
 205 ```
 206
 207 ```css
 208   /* Area positioning */
 209   grid-area: header; /* You can use a named grid area from the container */
 210
 211   grid-area: 2 / 1 / 4 / 2; /* Or you can use positioning. This is equivalent to... */
 212   grid-row-start: 2;
 213   grid-column-start: 1;
 214   grid-row-end: 4;
 215   grid-column-end: 2;
 216 ```
 217
 218 ```css
 219   /* Self justification (horizontal or column alignment) */
 220   justify-self: start; /* Align item to the left */
 221   justify-self: center; /* Align item centered within its column */
 222   justify-self: end; /* Align item to the right */
 223   justify-self: stretch; /* (default) Fills available area (horizontally) */
 224 ```
 225
 226 ```css
 227   /* Self alignment (vertical or row alignment) */
 228   align-self: start; /* Align item to the top */
 229   align-self: center; /* Align item centered within its row */
 230   align-self: end; /* Align item to the bottom */
 231   align-self: stretch; /* (default) Fills available area (vertically) */
 232 ```
 233
 234 ```css
 235   /* Placement shorthand */
 236   place-self: start stretch;
 237
 238   /* The above is the same as below long-hand */
 239   align-self: start;
 240   justify-self: stretch;
 241 ```
 242
 243 ```css
 244 }
 245 ```
 246 {: .-setup}
 247
 248
 249 ## References
 250 {: .-one-column}
 251
 252  * [GRID: A simple visual cheatsheet](http://grid.malven.co/)
 253  * [CSS Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
 254  * [Browser support](https://caniuse.com/#feat=css-grid)
 255