Things I’ve learned about CSS grid layout

Things I’ve learned about CSS grid layoutJennifer WjertzochBlockedUnblockFollowFollowingFeb 19Photo by Julie Tupas on UnsplashWith CSS Grid you can create complex web designs.

It is very intuitive and very well supported by the major browsers.

In this article I will show how to build layouts in CSS Grids.

Setting Up CSS GridIt is very simple to get CSS Grid up and running.

First of all I would recommend to download Firefox’s Developer Edition.

Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid.

Here is the markup for a container (parent) with six items (children) in it:HTML<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> </div>To turn our container div into a grid, we give it a display of grid:CSS.

container { display: grid;}But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like.

It’ll position six divs on top of each other.

Basic CSS GridDefining Columns and RowsTo make it two-dimensional, we’ll need to define the columns and rows.

Let’s create three columns and two rows.

We’ll use the grid-template-row and grid-template-column properties.

CSS.

container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px;}Basic CSS Grid with Columns and RowsAdding Grid-Gap Between ItemsTo set a gap between rows and columns you can use grid-column-gap and grid-row-gap or grid-gap.

The good thing is, that the gaps are only created between the items and not to the outside of the grid.

Let’s add grid-gap to our example CSS:.

container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; grid-gap: 20px;}CSS Grid with 20px of Grid-GapI am using the grid-gap property to create a gap of 20px between my columns and rows.

This property is a shorthand for grid-column-gap and grid-row-gap.

Explicit And Implicit GridGrid lines are dividing the grid on the horizontal and vertical axis.

They start with number one.

If you open the Grid Inspector Tools on Firefox, this becomes much clearer.

CSS.

container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; grid-gap: 20px;}CSS Grid with Numbered Column Lines and Row LinesFirefox Developer Edition Inspector ToolsExplicitThe explicit part uses the grid-template-columns and grid-template-rows properties.

Here you specify how many columns and rows the container has and how wide they should be.

Explicit Grid with Closing Line at BottomCheck the continuous line “closing” the grid at the bottom, after the second row.

This line encloses the explicit grid.

You can also use a shorthand to define rows and columns.

The row track-listing coming before a forward slash, columns afterwards.

grid-template: 100px 100px / 200px 200px 200px;ImplicitThe properties grid-auto-columns and grid-auto-rows define the implicit grid.

Let’s give the rows a height of 50px and see what happens:grid-auto-rows: 50px;CSS Grid with Implicit GridNow all added lines will be 50px high.

The grid can only grow in one direction, so it adds either rows or columns.

As a result, only one of the above properties is effective.

The grid-auto-flow property specifies the direction of the implicit grid.

The Repeat() FunctionTo avoid a lot of typing with columns that are all the same width, we will use the repeat() function.

The 1st value in repeat() stands for the number of repetitions.

Then the desired grid properties follow.

Here’s an example for the repeat() function:CSS.

container { display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(2, 100px); grid-gap: 20px;}Since we didn’t change anything, the grid should still look exactly the same.

Fractional UnitsThe fr unit works as one fraction of the available space.

You can calculate flexible layouts without percentages, pixels or em.

Let’s see how we can use this new flexible value in our code:CSS.

container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;}For three columns with an equal width, we can use fractional units now, instead of setting a width:calc(100%/3) on the item.

This way, you can add as many child elements as possible, while the widths stays the same on all child elements.

CSS Grid using Fractional UnitsSince I didn’t set a fixed width, the elements now take up as much space as possible.

You can also combine the fr unit with any other CSS units of course.

For instance, in the example below, I used the 60% 1fr 2fr ratio for my grid.

CSS.

container { display: grid; grid-template-columns: 60% 1fr 2fr; grid-gap: 20px;}CSS Grid with the Ratio of 60% 1fr 2frSizing Individual Grid ItemsLet’s see how to determine the width of an item inside the grid container with the span keyword.

I am going to span item #5 across three column tracks.

All the items from item #6 onwards have skipped one spot to the next available cell.

CSS.

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

item5 { grid-column: 1 / span 3; background: #CAC4CE;}CSS Grid Spanning Item Five across Three ColumnsThe Grid-Auto-Flow PropertyIf you change grid elements, gaps may occur in the grid, as you can see in the previous example.

With the grid-auto-flow property you can control the auto-placement algorithm.

Items that run outside the defined grid tracks, will show in generated rows.

That is, unless we set grid-auto-flow to column.

grid-auto-flow: column;The dense keyword will place smaller items in the gaps and fill the grid as good as possible.

I have added another item#7.

CSS.

container { display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(2, 100px); grid-auto-flow: dense;}CSS Grid with Grid-Auto-Flow: DenseThe Span KeywordYou can also tell the grid item1 from our previous example how wide you want it to span and where you want it to end.

You can use the span keyword to avoid specifying end lines when items should span more than one column or row.

HTML.

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

item1 { grid-column: 1 / 4; grid-row: 1 / 3; background: #D7CDCC;}CSS Grid with Grid-Column Shorthand PropertyIf you want your item to span the entire width of the grid, but don’t know how wide your grid is, you can set grid-column:1/-1 .

Positioning Items in the GridWith CSS grids you can position the elements in the grid as you like.

You can move the child elements with four CSS properties: grid-row-start, grid-row-start, grid-column-start or grid-column-end.

Remember, the positioning is not done by grid columns, but by column lines.

CSS.

item1 { grid-column-start: 1; grid-column-end: 4; background: #D7CDCC;}CSS Grid using Grid-Column-Start and Grid-Column-EndAnd there is a simpler way of writing the syntax above:CSS.

item1 { grid-column: 1 / 4; background: #D7CDCC;}The Minmax() FunctionIf you set a fixed size for the items, a smaller viewport pushes the content together too much.

The minmax() property makes it possible to adapt the grid to the respective viewport of each user.

Feel free to check out the behavior of minmax() on different devices:CSS.

container { display: grid; border:1px solid #1D1E2C; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px; padding: 5px;}Auto-Fill vs.

 Auto-FitWhen to use auto-fill and when auto-fit can be a bit confusing, but it makes a lot more sense when you visualize it.

Auto-fill — fills the row with as many columns as it can fit.

CSS.

container { display: grid; border:1px solid #1D1E2C; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 20px; padding: 5px;}CSS Grid using Auto-Fill Keyword for RepeatAuto-fit— Columns take up any available space.

container { display: grid; border:1px solid #1D1E2C; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); grid-gap: 20px; padding: 5px;}CSS Grid using Auto-Fit Keyword for RepeatSix Properties for Justification and AlignmentWith justify-items you can justify the grid items along the row axis.

With align-items you can align the grid items along the column axis.

Justify-ContentCSS.

container { display: grid; border: solid 1px #1D1E2C; grid-template-columns: repeat(3, 200px); grid-gap: 20px; justify-content: ***;}CSS Grid with Justify-Content and StartCSS Grid with Justify-Content and CenterCSS Grid with Justify-Content and Space-AroundCSS Grid with Justify-Content and Space-BetweenAlign-ContentGive the container a fixed height of 500px and the items will stretch over the whole height.

CSS.

container { display: grid; border: solid 1px #1D1E2C; height: 500px; grid-template-columns: repeat(3, 200px); grid-gap: 20px; justify-content: space-around;}CSS Grid with a Fixed Height of 500px.

container { display: grid; border: solid 1px #1D1E2C; height: 500px; grid-template-columns: repeat(3, 200px); grid-gap: 20px; justify-content: space-around; align-content: space-around;}CSS Grid with Align-Content Space-Around.

container { display: grid; border: solid 1px #1D1E2C; height: 500px; grid-template-columns: repeat(3, 200px); grid-gap: 20px; justify-content: space-around; align-content:space-around;}.

item1{ background: #D7CDCC; width: 50px; justify-self: center; align-self: center;}CSS Grid with *** — Self on the Item ItselfHere is the short version for justify-*** and align-**:place-items: center center;Further ReadingRachel Andrew Grid by Example — Here you can learn everything about CSS Grid Layout.

Jen Simmons Learn CSS Grid — I follow Layout Land on Youtube for quite a while now.

Wes Bos CSS Grid Tutorial — It was my first Wes Bos Course and I found it very helpful and inspiring.

CSS Tricks’ Complete Guide to CSS Grid — I found it very good to clarify a few definitions.

They also offer some great illustrative examples.

I hope that my article has been helpful for learning some basics about CSS Grid Layout.

I am sure that sharing is still the best way of learning and remembering things.

.

. More details

Leave a Reply