---
title: "Grid lines - Glossary | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:33:07.983932+00:00"
instance: "kb-cron"
---

  * [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#content)
  * [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#search)

[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) 

HTML reference
    
  * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
  * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
  * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")

HTML guides
    
  * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
  * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
  * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")

Markup languages
    
  * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
  * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
  * [XML](https://developer.mozilla.org/en-US/docs/Web/XML)

CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) 

CSS reference
    
  * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
  * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
  * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
  * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")

CSS guides
    
  * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
  * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
  * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
  * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")

Layout cookbook
    
  * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
  * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
  * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)

JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 

JS reference
    
  * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
  * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
  * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
  * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")

JS guides
    
  * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
  * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
  * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
  * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")

Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) 

Web API reference
    
  * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
  * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
  * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
  * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
  * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
  * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")

Web API guides
    
  * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
  * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
  * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
  * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
  * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)

All
[All web technology](https://developer.mozilla.org/en-US/docs/Web) 

Technologies
    
  * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
  * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
  * [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
  * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
  * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
  * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")

Topics
    
  * [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
  * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
  * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
  * [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
  * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)

Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 

Frontend developer course
    
  * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
  * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
  * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
  * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)

Learn HTML
    
  * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)

Learn CSS
    
  * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
  * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)

Learn JavaScript
    
  * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)

Tools
Discover our tools 
  * [Playground](https://developer.mozilla.org/en-US/play)
  * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)

  * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
  * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
  * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
  * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
  * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
  * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)

About
Get to know MDN better 
  * [About MDN](https://developer.mozilla.org/en-US/about)
  * [Advertise with us](https://developer.mozilla.org/en-US/advertising)

  * [Community](https://developer.mozilla.org/en-US/community)
  * [MDN on GitHub](https://github.com/mdn)

[Blog](https://developer.mozilla.org/en-US/blog/)
  1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
  2. [Grid lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines)

# Grid lines
**Grid lines** are created anytime you use a [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout).
## In this article
  * [Example](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#example)
  * [Placing items onto the grid by line number](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#placing_items_onto_the_grid_by_line_number)
  * [Naming lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#naming_lines)
  * [See also](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#see_also)

##  [Example](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#example)
In the following example there is a grid with three column tracks and two row tracks. This gives us 4 column lines and 3 row lines.
Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Writing_modes) of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right.
![Diagram showing the grid with lines numbered.](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines/1_diagram_numbered_grid_lines.png)
Lines are also created in the _implicit grid_ when implicit tracks are created to hold content positioned outside of the _explicit grid_ , however these lines cannot be addressed by a number.
##  [Placing items onto the grid by line number](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#placing_items_onto_the_grid_by_line_number)
Having created a grid, you can place items onto the grid by line number. In the following example the item is positioned from column line 1 to column line 3, and from row line 1 to row line 3.
##  [Naming lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#naming_lines)
The lines created in the _explicit grid_ can be named, by adding the name in square brackets before or after the track sizing information. When placing an item, you can then use these names instead of the line number, as demonstrated below.
##  [See also](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#see_also)
###  [Property reference](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#property_reference)
  * [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns)
  * [`grid-template-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-rows)
  * [`grid-column-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-column-start)
  * [`grid-column-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-column-end)
  * [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-column)
  * [`grid-row-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-row-start)
  * [`grid-row-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-row-end)
  * [`grid-row`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-row)

###  [Further reading](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines#further_reading)
  * CSS grid layout guides: 
    * [Basic concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts)
    * [Line-based placement with CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Line-based_placement)
    * [Layout using named grid lines](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Named_grid_lines)
    * [CSS grids, logical values and writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Logical_values_and_writing_modes)
  * [Definition of grid lines in the CSS grid layout specification](https://drafts.csswg.org/css-grid/#grid-line-concept)