What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?

Question

What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?

During a recent tech presentation I delivered at my workplace on the new CSS grid spec, my manager posed an intriguing question that left me stumped. He wanted to know why elements positioned within a grid are identified based on the grid lines they fall between, rather than having a more straightforward method for identifying columns and rows. Although I am familiar with grid-template-areas, it still requires manual definition.

In essence, the question boils down to this: Why do we use grid line numbers instead of grid column numbers in the following example?

grid-column: 1/4;

css css-grid

Answer 1

Answer №1

Grid lines serve as boundaries for positioning grid items and defining grid areas with a clear starting and ending point.

Specifying that a grid item starts at grid line 1 and ends at grid line 4 indicates that the item should be within the space between those lines. On the other hand, stating that a grid item starts at column 1 and ends at column 4 raises questions about whether the item should occupy column 4 or not. This ambiguity could lead to overlapping issues if another item is placed in column 4 following similar semantics.

This distinction becomes crucial for auto-placement, as it may require creating new rows and columns when there isn't enough space in the explicit grid for additional items. For more information, refer to Section 8.5 of the specification.

Answer 2

Grid lines serve as boundaries for positioning grid items and defining grid areas with a clear starting and ending point.

Specifying that a grid item starts at grid line 1 and ends at grid line 4 indicates that the item should be within the space between those lines. On the other hand, stating that a grid item starts at column 1 and ends at column 4 raises questions about whether the item should occupy column 4 or not. This ambiguity could lead to overlapping issues if another item is placed in column 4 following similar semantics.

This distinction becomes crucial for auto-placement, as it may require creating new rows and columns when there isn't enough space in the explicit grid for additional items. For more information, refer to Section 8.5 of the specification.

Answer 3

Answer №2

The CSS Grid specification provides various methods for aligning and positioning items within a grid container, as outlined in the section titled Placing Grid Items.

Concerning your query:

Why do the numbers in the example correspond to grid line numbers rather than column numbers?
grid-column: 1 / 4;

This approach of placing grid items is known as "Line-based Placement", which focuses on the lines that define the boundaries of a grid area.

Line-based Placement

The grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties specify the size and location of a grid item within the grid by defining its edges in terms of lines, spans, or automatic placement. This determines the start and end points of the grid area in relation to inline and block directions.

("inline-start" refers to the starting point of text, usually the left side in LTR writing. "block-start" corresponds to the top in horizontal writing. "-end" indicates the opposite direction. source)

If you prefer to count columns/rows instead of lines, utilize the span keyword.

For instance:

grid-column: 1 / 4

defines a grid area from column line 1 to column line 4 (in this case, spanning columns 1, 2 & 3)...

grid-column: 1 / span 3

achieves the same result but counts the columns instead.

There are additional techniques available. Refer to the details here:

https://www.w3.org/TR/css3-grid-layout/#placement

Below is a demonstration showcasing these two methods:

article {
  display: grid;
  grid-template-columns: repeat(12, 75px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

section:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1;
}

section:nth-child(2) {
  grid-column: 1 / span 3;
  grid-row: 2;
}

/* additional styles for demo */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<article>
  <section><code>grid-column: 1 / 4<br>line counting</code></section>
  <section><code>grid-column: 1 / span 3<br>column counting</code></section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</article>

Answer 4

The CSS Grid specification provides various methods for aligning and positioning items within a grid container, as outlined in the section titled Placing Grid Items.

Concerning your query:

Why do the numbers in the example correspond to grid line numbers rather than column numbers?
grid-column: 1 / 4;

This approach of placing grid items is known as "Line-based Placement", which focuses on the lines that define the boundaries of a grid area.

Line-based Placement

The grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties specify the size and location of a grid item within the grid by defining its edges in terms of lines, spans, or automatic placement. This determines the start and end points of the grid area in relation to inline and block directions.

("inline-start" refers to the starting point of text, usually the left side in LTR writing. "block-start" corresponds to the top in horizontal writing. "-end" indicates the opposite direction. source)

If you prefer to count columns/rows instead of lines, utilize the span keyword.

For instance:

grid-column: 1 / 4

defines a grid area from column line 1 to column line 4 (in this case, spanning columns 1, 2 & 3)...

grid-column: 1 / span 3

achieves the same result but counts the columns instead.

There are additional techniques available. Refer to the details here:

https://www.w3.org/TR/css3-grid-layout/#placement

Below is a demonstration showcasing these two methods:

article {
  display: grid;
  grid-template-columns: repeat(12, 75px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

section:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1;
}

section:nth-child(2) {
  grid-column: 1 / span 3;
  grid-row: 2;
}

/* additional styles for demo */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<article>
  <section><code>grid-column: 1 / 4<br>line counting</code></section>
  <section><code>grid-column: 1 / span 3<br>column counting</code></section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</article>

Answer 5

Answer №3

That's a great question! Here is a simple example of a grid layout:

In traditional CSS grid layouts, columns can be referenced by start and end line numbers like this:

grid-column: 2 / 4;

However, it could have been equally valid to specify column numbers instead:

 grid-column: 2 / 3;

The methods for defining columns would still work in the same way:

 grid-column: 2 / -1;

 grid-column: 2 / span 2;

The choice between referencing grid lines versus tracks (rows and columns) only becomes significant when trying to reference the last row or column from a starting point, leading to potential off-by-one errors.

So why did the W3C opt for lines over tracks? The answer lies in The Story of CSS Grid, from Its Creators, an article on A List Apart.

Peter Linss, Co-Chair of the CSS Working Group, proposed including the concept of grid lines in the spec to make it more intuitive for designers.

Rossen Atanassov, Editor of the spec at Microsoft, shared insights on combining app-centric models with traditional graphic design grids based on lines for a seamless implementation.

In essence, the decision to use grid lines aimed to bridge the gap between different design perspectives for the benefit of all users. While some may find the adoption of one-based addressing and grid lines unusual, it ultimately enhances the versatility and functionality of CSS grid layouts.

Answer 6

That's a great question! Here is a simple example of a grid layout:

In traditional CSS grid layouts, columns can be referenced by start and end line numbers like this:

grid-column: 2 / 4;

However, it could have been equally valid to specify column numbers instead:

 grid-column: 2 / 3;

The methods for defining columns would still work in the same way:

 grid-column: 2 / -1;

 grid-column: 2 / span 2;

The choice between referencing grid lines versus tracks (rows and columns) only becomes significant when trying to reference the last row or column from a starting point, leading to potential off-by-one errors.

So why did the W3C opt for lines over tracks? The answer lies in The Story of CSS Grid, from Its Creators, an article on A List Apart.

Peter Linss, Co-Chair of the CSS Working Group, proposed including the concept of grid lines in the spec to make it more intuitive for designers.

Rossen Atanassov, Editor of the spec at Microsoft, shared insights on combining app-centric models with traditional graphic design grids based on lines for a seamless implementation.

In essence, the decision to use grid lines aimed to bridge the gap between different design perspectives for the benefit of all users. While some may find the adoption of one-based addressing and grid lines unusual, it ultimately enhances the versatility and functionality of CSS grid layouts.

What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason for the lack of letter-spacing between a nested inline element and the next character that follows?

Combining the p class with flexbox for optimal layout design

What is the best way to center my dropdown menu on the page?

Fix the positioning of a div in BootStrap and CSS code

challenges with website design on Internet Explorer 7

Implementing image max-width and maintaining aspect ratios for responsiveness

Deleting various classes (jQuery)

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Looking to add a dropdown feature to my current main navigation bar

What are some effective ways to stretch specific muscles?

Placing a CSS image with absolute positioning on top of a responsive image

Eliminating Unnecessary Stylesheets in Vite and Vue Website

Execute script when on a specific webpage AND navigating away from another specific webpage

Ensure that the <aside> elements span the entire width of their containing parent element

Extracting CSS data and storing it in a SQL database

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

What could be the reason behind my code functioning properly on CodePen but not in my editor?

Margin ambiguity in a vue.js application

Is it possible for us to customize the angular material chip design to be in a rectangular shape