How to use the grid-column property

HTML-CSS
1

I am currently taking the FreeCodeCamp curriculum and I am at the level of CSS grid. I got stuck at the exercises of setting the grid-column property to consume the last 2 columns. Any help on how to do such changes ?

2

Link to the challenge?
Do you have any code?

3

@JosiasAurel Hi there, so I think I remember the specific lesson you are having trouble with (CSS Grid: Use grid-column to control spacing) https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing

In short, there are four column lines in the example of a 3x3 CSS grid that FCC provides for this lesson. The goal is to make the item5 class consume the last two columns of the grid.

FCC creates a 3x3 CSS grid in a parent container that holds items: item1, item2, item3, item4, item5. Below is the snippet for creating the css grid that will contain each of the item <div class="item1">1</div> DOM elements.

.container {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    background: lightgray;
}

(grid-gap is deprecated so I checked documentation and replaced it with the gap property)

Using the property grid-column on an item within a CSS Grid allows us to set the start and end value for how many vertical lines that item should span within the grid (ie the controlling the spacing of columns).

(Hint: A 3x3 grid has 4 vertical lines, so if an item must span the last two columns of the grid, I should give the grid-column property a start value of 2 (which is the second vertical line within grid) and 4 as the end value (the last vertical line within grid).

In order to have item5 consume the last two columns of a 3x3 grid, it must start at vertical column line 2 and end on vertical column line 4, resulting in grid-column: 2 / 4;

.item5 {
    grid-column: 2 / 4; /* have item5 span all columns of the grid but the first */
}

I hope this was able to help you understand CSS Grid a bit more and more specifically the grid-column property. Good luck! :]

1 Like