Frontend Scrapbook

Notes that make a difference

CSS Grids

By admin

on Thu Sep 17 2020

CSS Grids are a way to layout/markup websites. It has much flexibility compared to a framework like Bootstrap. It makes your markup a lot simple and has good web support

.container {
 display: grid;
 grid-template-columns: 100px auto 100px;
 grid-template-rows:  100px 500px;
}

grid-template-columns above defines a 3 column layout ( first & last element 100px wide ) and the middle element takes up the remaining space. )

grid-template-rows above defines a 100px height of the 1st row and 500px height for the second row.

If we want all the columns to be equal regardless of the width, ie to bring responsiveness to the grid, CSS grids bring a new unit with it. It is called ‘fr’ ( fraction ) unit.

.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr; // repeat(3, 1fr);
 grid-template-rows:  100px 100px; // repeat(2, 100px);
}

We could define a 12 column layout for much more layout flexibility.

.container {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
}

grid-template is the shorthand for grid-template-rows and grid-template-columns.

grid-template: repeat(2, 100px) / repeat(3, 1fr);
// grid-template-rows / grid-template-columns;

For each column, we could define how we layout individually

|Home|Login| -> 2 column has 3 lines
|  Footer  | -> starts at 1 and ends at 3

.footer {
  grid-column-start: 1
  grid-column-end: 3
//grid-column: 1 / 3;
//grid-column: 1 / span 2;
//grid-column: 1 / -1; // -1 is the last column line.
}

grid-row: 1defines the start and end row line (vertically)

.menu { 
 grid-row: 1 / 3 // start at  1st row and ends at 3rd
}

grid-template-areas are ways to easily prototype layout. we can create rectangular regions or areas and then later refer by named columns ( through classes for example ).

.container {
    height: 100%;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 30px auto 20px;
    grid-template-areas: 
        "m h h h h h h h h h h h"
        "m c c c c c c c c c c c"
        ". f f f f f f f f f f h"; // dot defines empty region

}

.header {
    grid-area: h;
}

.menu {
    grid-area: m;
}

.content {
    grid-area: c;
}

.footer {
    grid-area: f;
}

auto-fit and minmax

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

If the container width isn’t a multiple of 100, then, in the above case, the container will have free space ( say, on to the right ). We can use minmax to fix it. It distributes the free space equally among the container items.

 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

We can define rows to have consistent or equal heights by settings grid-auto-rows property.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 100px;
}

justify-content, align-content, justify-items, andalign-items

Refer https://www.digitalocean.com/community/tutorials/css-align-justify

auto-fit vs auto-fill

Both add new column tracks but in auto-fit, the new column is collapsed to a width of 0 pixels to fit all the items in the horizontal direction. whereas, auto-fill doesn’t collapse the space to 0px and results in empty space