Grid
Fri Jan 01 2021 19:24:30 GMT+0000 (Coordinated Universal Time)
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
Comments