CSS grid-row-end

christian.dinh's avatar
Published Jul 16, 2021Updated Sep 3, 2021
Contribute to Docs

Specifies the end of a content span over a set of rows within a grid framework.

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

The grid is a combination of horizontal and vertical lines that frame the rows and columns, which are the spaces between the lines. The top left corner of a grid is defined by a vertical and horizontal line, each designated the value 1. The right side of the first column and the underside of the first row are defined by lines with the value 2, and so on through value n.

.some-text {
grid-row-end: <grid-value>;
}

where <grid-value> can be one of the following:

  • Grid keyword: auto
  • Grid line value: 1
  • Grid line name: article-content-start

Example 1

Content that starts on the second row and spans four rows:

.foo-text {
grid-row-start: 2;
grid-row-end: 6;
}

All contributors

Contribute to Docs

Learn CSS on Codecademy

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours