CSS Grid

CSS Grid is the most useful tool to create layouts and arrange content without bootstrap, tables or float

Grid vs. Flex

There are a lot of similar features in Grid and Flex, but I would create the bigger layout and content positioning with Grid and use flex more in use cases which are dependent on the content and the size of the content

Simple Grid

We have to definde display: grid on the parent. Afterwards all the children are handled as grid items

Example

This is a grid item

Code

        .grid {
            display: grid;
        }

More information

Grid in the Mozilla docs

Grid template columns

With this property we can define the columns of our grid. The fr unit stands for fraction

Example

2fr

5fr

1fr

Code

        .fr {
            grid-template-columns: 2fr 5fr 1fr 1fr 1fr;
        }

More information

Flex values in Mozilla docs

Layouts with grid

You can represent most of the layouts with the grid. In this example we create multiple grid-areas. Please note that they have to be rectangular

Example

Content

This text will be not be longer than 20chars. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna

Code

        .header {
            grid-area: header;
        }
        .footer {
            grid-area: footer;
        }
        .content {
            grid-area: content;
        }
        .sidebar {
            grid-area: sidebar;
        }

        .area{
            grid-auto-rows: minmax(100px, auto);
            grid-auto-columns: 200px 3fr;
            grid-template-areas:
                    "header header "
                    "sidebar content "
                    "sidebar footer";
        }

More information

Grid areas in Mozilla docs Grid template areas in Mozilla docs

Overlapping Images with Grid

If you have a grid and put an image and another grid-item on the same place, you get the following cool looking result.

Example

Hans-Rudolf Berner, CC BY-SA 4.0, via Wikimedia Commons

Code

        .described_img {
            align-items: end;
        }
        .described_img {
            max-width: 640px;
        }

        .described_img > img {
            grid-column: 1;
            grid-row: 1
        }

More information

Youtube video describing some css grid tricks for overlapping content

Responsive grid

Simply display a list of items, cards and more without media querys, just using css grid

Example

Hans-Rudolf Berner, CC BY-SA 4.0, via Wikimedia Commons

Code

        .responsive{
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            justify-items: center;
            gap: 0.5rem;
        }

More information

Short CSS Tricks article on responsive grid Intrinsically Responsive CSS Grid with minmax() and min()

Tricks

You can use grid to create a quick and easy layout for your webpage. No more tables, bootstrap, float or pixel calculations
Create components, cards and other layouts simply with grid (and nested grids).
Use the grid to simply show a list of items in a responsive way