Skip to content

[css-grid] [css-grid-2] Manage GRID cell as FLEX (subgrid). #6714

Open
@korenevskiy

Description

@korenevskiy

Adding support for styles like this

grid-direction: ...;
grid-wrap: ...;

in GRID
We perceive GRID as something more advanced than FLEX.
But if we draw an analogy, we can see that if FLEX is a full-fledged completed embodiment of the idea. Then the GRID is not finished.
There is a proposal to complete the idea of GRID. I propose to make each GRID cell similar to the FLEX markup.
So we need style properties

grid-direction: ...;
grid-wrap: ...;

Appointment:
We use a grid for the site: Header, modules, footer and content.
by setting a position in the grid for each block, we can solve our problems, but only apart from one important problem we have not solved.
If we place several articles in the grid in the content position, then the articles will overlap each other. But the number of articles is an indefinite and unknown quantity in the layout. Today there is 1 news on the site, and tomorrow there is already a lot of news. We are forced to use nested tags. But it happens that nested positions require stretching into several columns.

Or for example, you add a second news block to the page, we do not need to rewrite the layout, we need to create a nesting of blocks. If we can manage each cell as FLEX, then by setting grid-direction: column;
we will get the ordering of news blocks in one cell.

Do you think it would be useful for you to use the GRID-DIRECTION and GRID-WRAP properties managing each cell as FLEX.?

body{
	display:grid;
	grid-template-areas: "left content right";
       grid-direction: column;
}
.content{
	grid-area: content;
}
<article class='content'>Blog article one</article>
<article class='content'>Blog article two</article>
<article class='content'>Blog article three</article>

All these blocks are now arranged in one cell as a column.
I repeat that my idea is to determine the behavior of the blocks by placing them in one grid cell. In one grid cell.

image

GIF Пт 08 10 2021 2-36-48

Example

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions