CodeBlanks Logo Icon CodeBlanks
Login Register

Grid-column

CSS course · Intermediate · Lesson 40/98

Learn item placement across columns with grid-column.

grid-column: placement across columns

In a grid layout, each item occupies one cell by default. With the grid-column declaration you decide how many columns an element spans. A headline, banner or image can then stretch across several columns.

The value uses column line numbers: grid-column: 1 / 4 places the item from line 1 to line 4; that is three columns.

The span keyword

You can use the span keyword instead of an end line. grid-column: 1 / span 3 means 'start at line 1 and span 3 columns'. grid-column: span 2 leaves the start automatic and only fixes the width.

This form is handy when the column count may change later but the element's span width should stay the same. Magazines and newspapers use it often.

The magazine lead story

On a magazine front page the lead story usually spans 2-3 columns, while side stories stay in a single column. With grid-column: 1 / span 3 you place the lead at the start of the grid and stretch it across three columns.

This is the basic way to create visual weight. The reader's eye lands on wide elements first, so the most important content gets the widest area.

Exercise Stretch the lead across 3 columns

On the magazine grid, place the .hero element starting at column line 1 and spanning 3 columns. Write only the grid-column declaration inside the .hero rule.

Show example solution 
.hero {
  grid-column: 1 / span 3;
}

Test yourself

  1. What does grid-column: 2 / 5 do?

    .item {
  grid-column: 2 / 5;
}
    • Places the item from line 2 to line 5
    • Places the item from row 2 to row 5
    • Hides columns 2 and 5
    • Sets the total column count to 5
    Show answer

    Places the item from line 2 to line 5 — Correct. Both values are column line numbers; the item starts at line 2 and ends at line 5.

  2. Span 3 columns

    .hero {
  grid-column: 1 / ____;
}
    Show answer 
    .hero {
  grid-column: 1 / span 3;
}

  3. Match each grid-column value to its meaning

    grid-column: 1 / 3
    From line 1 to line 3
    grid-column: 1 / span 3
    From line 1, span 3
    grid-column: 2 / 4
    From line 2 to line 4
    grid-column: auto
    Automatic placement

All lessons in Intermediate

1 Flexbox basics

  1. What is a flex container?
  2. Flex-direction
  3. Justify-content
  4. Align-items
  5. Flex-wrap
  6. Summary - Horizontal menu

2 Advanced flexbox

  1. Flex-grow
  2. Flex shorthand
  3. Order
  4. Align-self
  5. Gap
  6. Summary - Card grid

3 Pseudo-classes

  1. :hover and :focus
  2. :nth-child
  3. :not and :is
  4. :first-child and :last-child
  5. :checked and :disabled
  6. Summary - Interactive list

4 Pseudo-elements

  1. ::before and ::after
  2. Content property
  3. ::first-letter and ::first-line
  4. ::selection
  5. ::placeholder
  6. Summary - Decorative heading

5 Advanced selectors

  1. Sibling combinators (+ and ~)
  2. Attribute selector patterns
  3. :where and :has
  4. Summary - Breadcrumb menu

6 Project: Landing page

  1. Project: Landing page
  2. Hero section
  3. Feature list
  4. Pricing cards
  5. Project final - Landing page

7 Grid basics

  1. What is a grid container?
  2. Grid-template-columns
  3. Grid-template-rows
  4. Grid gap
  5. Repeat function
  6. Summary - Photo gallery

8 Advanced grid

  1. Grid-column
  2. Grid-row
  3. Grid-template-areas
  4. Grid-area
  5. Minmax function
  6. Summary - Magazine layout

9 Responsive design basics

  1. Viewport meta
  2. Media query basics
  3. Breakpoints
  4. Responsive typography
  5. Responsive images
  6. Summary - Responsive card

10 Responsive layout

  1. Mobile-first approach
  2. Responsive grid layout
  3. Responsive flex layout
  4. Hiding and showing
  5. Print styles
  6. Summary - Multi-column page

11 Transitions

  1. What is a transition?
  2. Transition-property
  3. Transition-duration
  4. Timing function
  5. Transition-delay
  6. Summary - Hover effects

12 Transforms

  1. What is a transform?
  2. Translate
  3. Rotate
  4. Scale
  5. Skew
  6. Summary - Interactive card

13 CSS variables

  1. What are CSS variables?
  2. Defining variables
  3. Var() function
  4. Variable fallback
  5. Theme switching
  6. Summary - Design system

14 Form styling

  1. Input styles
  2. Label and placeholder
  3. Focus states
  4. Button styles
  5. Checkbox and radio
  6. Summary - Registration form

15 Table styling

  1. Table skeleton
  2. Border-collapse
  3. Header cells
  4. Zebra stripes
  5. Hover row
  6. Summary - Data table

16 SVG styling

  1. What is SVG?
  2. Fill and stroke
  3. SVG hover effects
  4. CurrentColor
  5. SVG icons
  6. Summary - Icon set

17 Intermediate final

  1. Challenge - Flexbox gallery
  2. Challenge - Grid magazine
  3. Challenge - Responsive navbar
  4. Challenge - Form and table
  5. Challenge - Intermediate capstone