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:

https://i.sstatic.net/QDg69.png

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:

https://i.sstatic.net/QDg69.png

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

Responsive design and column alignment dilemma

The JQuery loading symbol does not prevent keyboard interactions

Personalizing the pop-up window using window.open

Explore and target elements using browser inspection

The media query was running smoothly until it unexpectedly stopped functioning

seize the cursor on chrome for windows

Transitioning from clip to clip-path in order to utilize percentage values

Instructions for including a scroll bar in an HTML side menu

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

JavaScript error leading to ERR_ABORTED message showing up in the console

It is important for the button size to remain consistent, regardless of any increase in text content

I've created a logo, but why are there two logos on my website?

The performance of ASP.net text-boxes is inconsistent

The positioning of the Bootstrap dropdown menu is not aligned correctly

Getting the CSS for an element's "Active" state using jQuery

Faux CSS, every other moment appears to be unsuccessful

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

Tips for positioning a Wordpress navigation bar to the right of a logo

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

Issue with FullPageJS: scrollOverflow feature not functioning upon click event