Grid


PHOTO EMBED

Fri Jan 01 2021 19:24:30 GMT+0000 (UTC)

Saved by @jpannu

.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;}
content_copyCOPY