CSS Grid layout review with examples: Part 2

In the previous post we demonstrated the css grid layout with some  examples and learnt the concepts. We showed how to define a grid layout with display property and how to define columns and rows and also the positioning of grid item. Also we demonstrated some shorthands like repeat that are useful in practice.

In this post we check some more examples and will learn more syntaxes and ideas of grid examples using grid by examples.

Line-based placement named lines with spans

You can give lines (grid line) the same name and then use the span keyword to target lines of a certain name.  Here we start at a certain column line by using col  and span by saying span . See below:

Placing footer in the page without clearing

In this example we place the footer in its grid-template-areas by defining its grid-area and it sits right where it should. No clearing is required as in the float positioning:

Using z-index for overlaid items

You guessed it right. You can use z-index property for items that are overlaid with other items and make them live in the grid and control their position by yourself:

Redefining the grid areas using media queries

We all know about responsive design and media queries. In the grid layout, we can control and redefine the positioning of grid layout items using grid-area in media queries. In this example in two break points the grid areas have been redefined and if you resize your browser you will see how the layout will change.

Nested Grid

A grid item could be a grid container itself by simply setting the display property to grid. In example below the D item of the parent grid has become a grid container of the rest of the items itself:

A simple minmax() example

In grid layout we could use the minmax() notation to specify the minimum and maximum width for an item. The rest of items will take the leftover spaces after this item took position.

Box alignment with align-items property

Just like Flexbox we could align items in the grid container and grid item as well. In this example the gird container has align-items set to center and the last item(box e) has its own alignment align-self property set to stretch.

There are lots of other examples that you could create or take a look while you are researching around grid layout system. We cover most important and useful parts of grid layout that could be a beginning to learn more about them. Hope it was helpful to you.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.