5 ms·

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float,

by sesm 3y ago

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.

deleted 3y ago
[deleted]
nailer 3y ago
grid is also a sensible default. Unless you actually want flexing, there is no reason to use flexbox and its more complicated syntax.
- dkdbejwi383 3y ago
  Personally I find grid more complex - but perhaps I just haven't used it as much compared with flexbox. The vast majority of the time, I find that elements within a particular component (here meaning chunk of UI, not a React/Vue/Svelte etc module) naturally fit along a single axis.
  - nailer 3y ago
    There’s nothing requiring you to have multiple rows or columns in your grids.
filleduchaos 3y ago
Table is not the oldest CSS layout system. That would be flow layout, which oddly enough doesn't appear in this list at all.
mananaysiempre 3y ago
> CSS layout [...] has 4 different layout systems: table, the oldest one, still used for email [...]. Nooot exactly? Literal HTML table markup is indeed probably the oldest way of laying parts of webpages side by side and is still used for email, but that has little to do with CSS. In CSS, you have display: table and related values, but IIRC they were less usable on old IE versions than floats and received fairly limited use; certainly not nearly as much as literal non-semantic tables. I haven’t noticed them receive much use on the modern Web, either, and I don’t really know why—perhaps the requirements on the surrounding markup are too stringent (there’s no way to reorder things, for example, and if you need multiple rows you’ll need to include some sort of elements in your HTML to play that role).
cantSpellSober 3y ago
The first 2 are ersatz "layout systems" that were practiced before flexbox and grid. <table>s and the float property can be used alongside Grid. The easiest (and default) layout system (flow) is never mentioned https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
- chatmasta 3y ago
  That's a useful MDN page, and it's even the third page of the "CSS Layout" section of "Learn Web Development." And yet, how many people reading these comments have ever seen that page? I'll admit that I hadn't seen it! Sometimes it's nice to read the docs of your tools from the top down, rather than relying on whatever local section of documentation Google sends you when you're solving a specific problem. There are a lot of great docs! (If you use Git every day, when was the last time you browsed the Git manual? How about JavaScript? CSS?)
  - pests 3y ago
    When has it became normalized to not read docs and be almost proud of it? I harp on this a lot, but computer engineering will never be treated seriously if we continue acting like documentaton or manuals are too good for us. Its like if when designing a bridge no one read the spec sheet on the bolts. If I ever hear a bridge or structural engineer going "huh, TIL" about a fact found in the manual of a tool or item he uses every day I'm running
    - chatmasta 3y ago
      Well, it's not so much that people don't read docs, but that they don't keep reading them. Most people probably read (or at least skim) the manual cover-to-cover when learning a new tool. But once you're actively using it, the main interaction with its docs is when you land on a specific page to solve your immediate problem. I'm advocating for periodically reading the docs of your most commonly used tools, as if you were a new user. You'll pickup something new nearly every time you do that.
CharlesW 3y ago
> There is also absolute and fixed positioning as a hack to bypass layout. They're not hacks, and they don't "bypass" layout. `absolute` and `fixed` are two of five options for positioning that dictate how an element is placed and behaves in the flow of the document, or within a specific container. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
johnny22 3y ago
how is grid an alternative for table? Do you only mean in a layout sense only?
brikym 3y ago
In addition: - Flexbox froggy is the best way to learn flex. - Before you even start writing anything find someone elses css-reset rules as that'll replace years of legacy backwards compatible behaviour with some sane defaults. (e.g. https://www.joshwcomeau.com/css/custom-css-reset/#our-finished-product-10 https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...)
globular-toast 3y ago
Table isn't a CSS layout system. Table layouts abused the HTML table element because CSS didn't support such layouts. The problem was it became impossible to distinguish between a real table in a document and one that is just used for layout.

by sesm 3y ago

deleted 3y ago

[deleted]

nailer 3y ago

grid is also a sensible default. Unless you actually want flexing, there is no reason to use flexbox and its more complicated syntax.

dkdbejwi383 3y ago
Personally I find grid more complex - but perhaps I just haven't used it as much compared with flexbox. The vast majority of the time, I find that elements within a particular component (here meaning chunk of UI, not a React/Vue/Svelte etc module) naturally fit along a single axis.
- nailer 3y ago
  There’s nothing requiring you to have multiple rows or columns in your grids.

filleduchaos 3y ago

Table is not the oldest CSS layout system. That would be flow layout, which oddly enough doesn't appear in this list at all.

mananaysiempre 3y ago

> CSS layout [...] has 4 different layout systems: table, the oldest one, still used for email [...]. Nooot exactly? Literal HTML table markup is indeed probably the oldest way of laying parts of webpages side by side and is still used for email, but that has little to do with CSS. In CSS, you have display: table and related values, but IIRC they were less usable on old IE versions than floats and received fairly limited use; certainly not nearly as much as literal non-semantic tables. I haven’t noticed them receive much use on the modern Web, either, and I don’t really know why—perhaps the requirements on the surrounding markup are too stringent (there’s no way to reorder things, for example, and if you need multiple rows you’ll need to include some sort of elements in your HTML to play that role).

cantSpellSober 3y ago

The first 2 are ersatz "layout systems" that were practiced before flexbox and grid. <table>s and the float property can be used alongside Grid. The easiest (and default) layout system (flow) is never mentioned https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

chatmasta 3y ago
That's a useful MDN page, and it's even the third page of the "CSS Layout" section of "Learn Web Development." And yet, how many people reading these comments have ever seen that page? I'll admit that I hadn't seen it! Sometimes it's nice to read the docs of your tools from the top down, rather than relying on whatever local section of documentation Google sends you when you're solving a specific problem. There are a lot of great docs! (If you use Git every day, when was the last time you browsed the Git manual? How about JavaScript? CSS?)
- pests 3y ago
  When has it became normalized to not read docs and be almost proud of it? I harp on this a lot, but computer engineering will never be treated seriously if we continue acting like documentaton or manuals are too good for us. Its like if when designing a bridge no one read the spec sheet on the bolts. If I ever hear a bridge or structural engineer going "huh, TIL" about a fact found in the manual of a tool or item he uses every day I'm running
  - chatmasta 3y ago
    Well, it's not so much that people don't read docs, but that they don't keep reading them. Most people probably read (or at least skim) the manual cover-to-cover when learning a new tool. But once you're actively using it, the main interaction with its docs is when you land on a specific page to solve your immediate problem. I'm advocating for periodically reading the docs of your most commonly used tools, as if you were a new user. You'll pickup something new nearly every time you do that.

CharlesW 3y ago

> There is also absolute and fixed positioning as a hack to bypass layout. They're not hacks, and they don't "bypass" layout. `absolute` and `fixed` are two of five options for positioning that dictate how an element is placed and behaves in the flow of the document, or within a specific container. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

johnny22 3y ago

how is grid an alternative for table? Do you only mean in a layout sense only?

brikym 3y ago

In addition: - Flexbox froggy is the best way to learn flex. - Before you even start writing anything find someone elses css-reset rules as that'll replace years of legacy backwards compatible behaviour with some sane defaults. (e.g. https://www.joshwcomeau.com/css/custom-css-reset/#our-finished-product-10 https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...)

globular-toast 3y ago

Table isn't a CSS layout system. Table layouts abused the HTML table element because CSS didn't support such layouts. The problem was it became impossible to distinguish between a real table in a document and one that is just used for layout.