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