Help with Mozilla Article Grid Layout Needed

MDN Learn
#1

Hi all!
New coder, sorry I am not on GitHub as yet. Pardon my form by listing question here. In link for article, please see “Flexible 12-column layout”. I’m not sure why the col. are listed differently for 2-col vs. 3-col.

  • .ad is listed after .side here vs. .content in 2-col, drops by col. first in listing order

@media (min-width: 500px) listing order of classes:
.header (auto-placement)
.main-nav (auto-placement)

.side
.ad
.content

2-col flow

@media (min-width: 700px)
.header (auto-placed)

.main nav
.content
.side
.ad
.main-footer
-Seems to flow by row in 3-col. as expected
3-col flow

Thank you very much,
Russ M.

#2

Hi @Russ_M and welcome to the community :wave:

I think the idea of the author was to put the elements without starting rows at the end (to use the remaining spaces). In the first example those are content and footer. Since we also explicitly place content in the second example the author went for the (western) reading order (left-to-right and top-to-bottom).

I hope that makes things clearer. :slightly_smiling_face:

Michael

#3

Hi Michael, thank you for your welcome and the quick reply. I appreciate it!

I think I understand. I hadn’t noticed that the row for .content/.main-footer was not explicitly stated in the 2-col. view, juts the column spans. So this keep things to the explicitly stated 4 rows and forces .content/.main footer into the remaining space of the stated col/rows.

So flow is from .ad (explicitly in row 4) and then to.content in row 3 and .main-footer one row 4. Due to grid-auto- flow default of row? Other flow rule?

For the 3-col. view - all is explicitly stated and .content is place in western reading order explicitly, is my understanding.

Many thanks again! :u)
Russ M

1 Like
#4

Without looking deeper into the topic I can’t say for sure, but I think first are the elements placed which have explicit starting rows and cols and then the remaining elements in order of appearance in the HTML code.
By default, grit-auto-flow is set to row. So the browser looks at the first row (from left to right) to find an empty space large enough for the element. If it doesn’t find one it goes to next row and so on.

#5

Thx again Michael. You got me going in good directions!

1 Like