CSS Layouts

CSS has a few different layout algorithms, known officially as “layout modes”. each layout mode has its own little sub-language within CSS

Box Model

this is really basic stuff; so basic that I often make the mistake that most people have at least a working understanding of these concepts, especially professional people working in web development and design. I have worked with people who really struggled to use "no code" and "low code" platforms like WebFlow and WordPress and I think their frustrations (and ultimately ignorant designs) stem from lacking these fundamental concepts. soooo don't be that person and at least skim this page
you can think of every HTML element as a box
in fact, you can open up your developer tools in your browser (if on a mac: command + option + i, ctrl + shift + i on Windows/Linux) and poke around. you can inspect specific elements or just hover around the HTML code and see the boxes, you'll notice every single element will be in a box and probably to some degree little boxes within boxes, maybe in different highlighting colors like blue, orange and green, maybe purple. those colors are showing you things like margins and padding
check out this image that I lifted right from the MDN docs:

if you google "CSS box model" you'll see tons of similar images but most of them are kind of cluttered and tbh a little confusing, labeling everything (I think some things are ok to be implied. do you need labeling for top, bottom, left and right?) and showing everything with equal sizing (borders are never going to be the same size as the content)

content: this is your text or image, the thing you are putting on the screen
padding: this gives your content a little breathing room. the padding is transparent unless you are applying a background-color to your element
border: the border goes around the padding and content
margin: this is invisible space around the box. it pushes other elements away from the box. you can actually use negative margins to pull elements closer or even overlap if you are getting wild

flow or "normal flow" is what the default behavior of CSS/HTML is known as. its the OG layout mode for the web
flow essentially refers to block and inline elements (what elements will start a new line and which ones don't)

flexbox or "flexible box" or just "flex" is really how you start to take control and put things where you want them on the screen
I find that a lot of devs, myself included, sort of default to flex when creating UI elements
you use flex when you need your elements to be in rows OR columns. that is what it means when they say that flexbox is a one-dimensional layout mode
flex allows you to control the direction of the elements, justify content, align items and have your elements grow and shrink to properly fit the space where you want them. that is huge for responsiveness (desktop and mobile friendly design)
deep dive in the next section

grid is a two-dimensional layout mode, meaning you can have both rows AND columns
grid is usually for arranging an entire page
you can use them together, if you have a complicated layout for an entire page, you are probably using grid to arrange flexbox elements

the position layout mode is for when you need to explicitly define where you want something, usually regardless of anything else on the page
this is where you can do things like define something to be fixed or absolute, which technically removes it from the normal document flow, and make things sticky

this is for tables (opens in a new tab)... not going to elaborate much more on this one, just know it exists