Description
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.