Advertisement
Guest User

Untitled

a guest
Nov 17th, 2019
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.15 KB | None | 0 0
  1.     .container {
  2.         display: grid;
  3.         grid-gap: 20px;
  4.         /* Make the grid 10 columns wide, every other taking up twice the free space */
  5.         grid-template-columns: repeat(5, 1fr 2fr);
  6.         /* Make the grid have 10 explicit rows, 50px high each */
  7.         grid-template-rows: repeat(10, 50px);
  8.       }
  9.  
  10.       /* With Item 1, start at col 3 and go until 5 */
  11.       .item1 {
  12.         grid-column: 3 / 5;
  13.       }
  14.  
  15.       /* With Item 2, start at col 5 and go until the end */
  16.       .item2 {
  17.         grid-column: 5 / -1;
  18.       }
  19.  
  20.       /* Make Item 5 double span 2 cols and rows */
  21.       .item5 {
  22.         grid-column: span 2;
  23.         grid-row: span 2;
  24.       }
  25.  
  26.       /* Make Item 8 two rows high */
  27.       .item8 {
  28.         grid-row: span 2;
  29.       }
  30.  
  31.       /* Make Item 15 span the entire grid width */
  32.       .item15 {
  33.         grid-column: 1 / -1;
  34.       }
  35.  
  36.       /* Make item 18 span 4 widths, but end 9 */
  37.       .item18 {
  38.         grid-column: span 4;
  39.         grid-column-end: 9;
  40.       }
  41.  
  42.       /* Make item 20 start at row 4 and go for 3 */
  43.       .item20 {
  44.         grid-row-start: 4;
  45.         grid-row: span 3;
  46.       }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement