cssgrid-ama icon indicating copy to clipboard operation
cssgrid-ama copied to clipboard

Grid-items that span relative number of columns when total number of columns is unkown

Open IOIIOOIO opened this issue 7 years ago • 1 comments

Hi, I'm not sure how better to phrase the title of my question.

Basically, I know it is possible to tell a grid-item to span the full width of columns even if you don't know how many columns there are:

.full-width {
  grid-column: 1 / -1;
}

This is a very nice way to abstract a Grid with little helper classes for reusability. All while still harnessing the flexibility that CSS Grid allows us where you aren't locked in to a fixed number of columns throughout your project.

However the problem is there is no way to do the same for something like .half-width or .quarter-width.

An example of how this would currently work with floats is pretty simple:

.full-width {
 width: 100%;
}

.half-width {
 width: 50%;
}

.quarter-width {
 width: 25%;
}

I realise it might be possible in a project to formulate some kind of system that uses Javascript etc to do this with CSS Grid... but currently there is no native ability.

So my question is:

Is there any spec planned or in the works that might give us this power?

IOIIOOIO avatar Oct 27 '17 10:10 IOIIOOIO

To extend on my question for clarity: I guess what I'm asking is will the Grid ever be, for lack of better words, self-aware? I see quite a few questions like that on here, often relating to getting feedback from the Grid. For example at the moment we apply styling to an element that is a Grid-Item... but you can't target a Grid-Cell or Grid-Area itself, you can't target a Grid-Area and say "don't auto-place items here", or in the case of an implicit Grid you can't say "how many columns are there at this present time?".

To answer my question around abstraction (let me know if I'm on the right track here) I read this article by Jen Simmons. In it she says "The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it".

So I guess one could argue that the problem actually lies in the fact that I'm still thinking in an old-world way. It's so easy to create Grid-Containers and control Grid-Items that abstarcting it into a "bootstrap-like" system isn't necessary.

On the other hand though, surely that also falls down to context, like if you're working in a large team or handing off a website as a CMS solution. Surely then there is some kind of benefit from creating a Grid system that is easy to manipulate but without having to create a new definition every time. eg: I don't want to do something like

Landing Page Styles:

.half-width {
 grid-column: span 6;
}

Contact Page Styles:

.half-width {
 grid-column: span 5;
}

What I do want is to say "Hey Grid, I don't know how many columns you currently have, but make this Grid-item use up half of them..."

IOIIOOIO avatar Nov 16 '17 10:11 IOIIOOIO