.parent { display : grid; //work with columns. grid-template-columns : 1fr 2fr 1fr; //content will be in ratios (1 : 2 : 1) //Or grid-template-columns : 200px auto 200px; //first and third will be 200px and middle will take whole place. //Or grid-template-columns : auto auto; //Or grid-template-columns : repeat(3,auto); grid-gap : 1rem; //Will create gap between Each items. //Work With Rows. grid-template-rows : 1fr 1fr; grid-auto-rows : 4fr; // Will triple the size by '4fr' after two (as only two are mentioned) Rows. } /* .parent { //Not used often. ( auto responsive but does not look good every time ). grid-template-columns: repeat(auto-fit, minmax(200px , 1fr))} */ .singleItem { //Spanning rows or columns. ( Lines should be counted ( horizontal or Vertical ).) //Here the Values are the postions of the current col/row. grid-column-start: 1; grid-column-end: 4; //or grid-column : 1 / span 3; grid-row-start: 1; grid-row-end: 3; //or grid-row: 1 / span 2; } //Grid , grid-template-areas. .gridParent { padding : 8px; display : grid; grid-template-areas: 'header header header' 'content box-1 sidebar' 'footer footer footer'; grid-gap: 1rem; } .header { grid-area: header;} .content { grid-area: content;} .sidebar { grid-area: sidebar;} .box-1 { grid-area: box-1; } .footer { grid-area: footer;}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter