Building a layout in HTML has never been easier, but there are still some fundamentals you need to be aware of in order to design pages quickly and effectively. The first step is to learn how webpages render different elements.
There are four main display types we're going to look at here.
Block
Block elements are full width containers that stack vertically. You can give them dimensions, such as a height and width and margin. Two consecutive block elements will stack vertically, even if there is room for them to fit side by side.
The most basic block element is <div />
Inline
Inline elements flow like text horizontally before overflowing to the next line. If you split a large inline element into two consecutive inline elements (for example, a paragraph into individual sentences), its layout will not change.
You cannot set the width or height of inline elements.
The most basic inline element is <span />
If you give a span
the css property display: block;
it will behave identically to a div
element, and vice versa. The only difference between these two basic elements that matters is the browser default display type.
Inline Block
Inline-Block elements flow like text, but you can give them width and height values. Two consecutive inline-block elements will line up horizontally as long as there is room, otherwise they will overflow to the next line.
Flex
This is one of the newest and most complicated display types, but is very powerful. When you set a container to display: flex
, its children will be arranged according to the rules you set.
On the container, your most important rules are going to be flex-direction
, align-items
and justify-content
.
align-items
sets the position of children on the cross-axis, so by default it works as a vertical align. If your flex direction is set to column, then it will work as a horizontal align instead. Most of the time you'll want to set this to center
justify-content
sets the position of children on the main-axis, so horizontally for rows and vertically for columns. space-around
, space-between
, and space-evenly
will be your highlights here, but you also have start
, center
, and end
to use.
There are many other rules, such as align-content, align-self, justify-self, justify-items —— but you don't need to concern yourself with these. They're poorly implemented by browsers and they don't do anything meaningful that you can't do with the above two selectors.
On the children, the most important rule is flex
which is a combination of three other properties: flex-grow, flex-shrink, and flex-basis. The first two are flags. Set flex grow to 1 if you would like the element to be able to expand automatically. Flex shrink allows it to reduce its size if needed. Flex basis is amount of space that element will take up.
flex: 0 1 30%
will give you an element that takes up 30% of its container, but can shrink if needed to fit more elements.
Single Column Page
The single column layout is the king of webpage design. Not only does it naturally scale for mobile, but it's clean and focused and does everything it needs to do very well.
On mobile devices, we want it to take up the full screen, but on large desktops we want it to be much narrower, so we can use the width and max-width properties to accomplish that.
Since we're going full width, display: block
is the key here and <div>
elements are already block by default so we don't need to specify that manually.
.page {
width: 100%;
max-width: 50rem;
}
Horizontal List
We want our list elements side by side, so that means inline
and inline-block
are our friends.
.horizontal-list li {
display: inline-block;
}
Two Column Layout (Sidebar and Content)
.content {
display: flex;
}
.column {
flex: 0 1 50%;
}
<div class="content">
<div class="column" />
<div class="column" />
</div>
Center Content in Window
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Top comments (4)
No love for
display:grid;
?Display: grid is good for 2D arrays of items, but to be honest I almost never need to use it
A long row of items that is able to overflow onto subsequent lines as needed works great for all display sizes
I will probably end up adding some grid stuff over time here, but at the moment I'll be updating it based on layouts I help people with over on DevCord
Great job Jacob, i can now a level 10 HTML ninja! Thank you so much for this. 💖
Love you too!