Matt Chaffe

Learning CSS Grids

Photo of Grids - Serigio Rola

I’ve always struggled with styling, always in awe of other’s designs and CSS abilities. So I decided to up my game and take a course on CSS to improve my skills and understanding. I also decided as in a previous article to build a small quiz app; currently seen here I used this app as a playground for my new skills!

Initial plan

When I was originally building the app I was just going to use Bootstrap, but I thought it looked to generic and was possibly overkill for what I needed. So I decided to go down the custom route, which started with flexbox as I had some basic experience with but I hadn’t built an entire site using flexbox. My lack of knowledge in CSS got me in a mess. I then started to look into CSS grid and took a Udemy course which gave me some fundamentals.

Grids

I used figma to do a few rough sketches (I’ve not used a design tool before) to give me an idea of what I should aim to build with the grids on different layouts. I decided on using cards and I wanted a maximum of 3 cards wide, so I needed at most 3 columns which would scale down to only 1 when on mobile.

Here is a codepen demo. I will walk through some of the styles.

Wrapper

There is a section which will wrap the cards this is the part which will decide ultimately how many cards will be displayed:

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-gap: 1rem;
}

Defining the display: grid tells the browser we will be using Grid, as opposed to flex or block etc. Then using the grid-template-columns I am using the repeat keyword here which allows you to define a size for the columns and have it repeated X times.

In this case, I am repeating and using auto-fit to ensure that the columns fit into the space, it’s using a minmax function to define the range for the column size, here it’s a minimum width of 30rem and a max of 1fr the fr is a unit within CSS and it’s used to flexible grow the size of the grid row or column.

The grid-gap: 1rem; is used to determine the space between the grid items.

The Card

The card itself has a grid within it to organise how the content is displayed:

  &__content {
    display: grid;
    grid: auto minmax(16rem, 1fr) auto / auto;
    grid-gap: 0.5rem;
    padding: 1rem 1rem;
  }

Similar to how the wrapper works, this is set to display: grid. But I am using the shorthand here to describe how the grid should be laid out:

.layout {
  grid: <rows> / <columns>
}

In the above snippet, we can see that grid: x / y is a shorthand property for grid-template-rows and grid-template-columns respectively.

Card Content

Within the card, I have a li which represents the leader names and their scores. As names are unknown and some people use first & second name I wanted to define the grid in a way that allowed maximum space for the name but if it got too long it would be truncated to prevent pushing the rest of the content of the layout.

Here is what I went for:

  li {
    display: grid;
    grid: auto / 2rem auto 5rem;
    align-items: center;
  }

  .leader-name {
    font-size: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
  }

The grid has auto for rows, then the li counter gets a 2rem area, the leader’s name get’s auto and the score get’s 5rem. The leader name area will fill all the remaining space and the leader-name class defines that any text outside of this space gets the overflow: hidden and the text-overflow: ellipsis so that when it does burst the area it will be truncated and show the ... ellipsis.

Thanks for reading!


Published 21 July 2020

Dad, Husband, Software Developer