Published on 09/03/2022 byNevulo
One of the most fundamental requirements to creating a great website is being able to move elements around on the page, instead of having everything appear in one big blob in a corner.
If you’ve styled elements with CSS, you know that it’s essentially putting a bunch of properties and values on a selected element in just the right way to make things look the way you want. Add some
color: red here, a dash of
background: black there.
So, we know how to visually differentiate elements, including size, colour, etc., but how do we actually move an element to where we want, for the resolutions we want?
CSS comes baked with a bunch of different layout modes for adjusting the behaviour of elements so you can lay out your page the way you want.
Whether you need a grid pattern, a table, columns, and much more, you’ll just need to find the right layout mode for what you need.
It’s important to understand that different layout modes will affect the way elements display differently, and not all CSS properties will work across all layout modes.
The default layout mode is called “flow”, where elements flow down the page.
display CSS property is used to set whether or not an element uses
Normal flow is the default way webpages lay themselves out when you haven’t applied any CSS to change how elements appear. Elements will appear at the top of the document and stack downwards, each one appearing on a new line below the last, as space is needed.
The flexible box layout model is a one-dimensional box where content can be positioned and distributed across an axis (horizontal or vertical).
This is helpful if you want to display a collection of elements in one dimension, like all on the same row for a navigation bar for example, or in a list.
Whereas Flexbox works in only one dimension, CSS Grid layout, which you can consider a successor to Flexbox, works with two dimensions, and you can align elements into columns and rows.
The main advantage of Grid over Flexbox is that it’s much more suited for creating responsive, collapsible layouts that work in a more predictable way.
If we want to shift elements without affecting other elements on the page heavily, such as shifting a button a little bit to the left, positioning is perfect. Use the
bottom properties on an element with units as values to move the element.
10pxfrom the top of the container), after which it becomes fixed
The float layout will pretty much “pull” an element to either the left or right side of the screen, using
float: left or
On a technical level, it’ll take the respective element out of the “normal flow” of the document, shifting it to the left, or right, until it touches the edge of its containing box, or another floated element.
Elements and text can still wrap around floated elements, unlike absolutely positioned elements.
Specifically designed for creating tables with rows and columns, like what you’d find in Excel. Great for rendering table data and makes it easy to customise tables such as spacing between cells, alignment of elements in the cells, etc.
Table layout is also a desirable fallback for older clients trying to replicate something like Flexbox or Grid where it’s not supported (ie. email clients… 😡).
Subscribe to the Nevuletter so you never miss new posts.