Hands-on exercises to help understand different layout techniques
Check out the codepen examples below, each with multiple ways to center content. Be sure to delete the css (or comment it out) line-by-line so you can fully understand the impact of each css property and value.
Centering
Horizontal Centering
See the Pen Exercise: Simple Horizontal Centering by kccnma (@kccnma) on CodePen.0
Note how it’s just one line of code: text-align: center;
Horizontal + Vertical Centering
See the Pen Exercise: Simple Horizontal and Vertical Centering with Flexbox by kccnma (@kccnma) on CodePen.0
Note the use of flexbox and subsequent two (three total) lines of code: display: flex; justify-content: center; align-items: center;
Absolute vs. Relative Positioning
Understanding when to use each is important and empowering.
HINT: it’s all about preserving normal flow.
“Don’t break me.” –Normal Flow
See the Pen CSS Positioning Test #1: Absolute vs. Relative by kccnma (@kccnma) on CodePen.0
Note how absolute positioning breaks normal flow.
It’s all Relative…
See the Pen CSS Position Test #2: Absolute child inside of a Relative Parent by kccnma (@kccnma) on CodePen.0
HINT: when you think of the word “relative” try to think of a family member such as your parent. In this context, whenever you are positioning an element using absolute positioning, think of it like a child and ask “who is the parent?” When a parent gets a position: relative setting, it becomes the 0,0 (x,y) coordinate for it’s absolutely positioned children.
Floats vs. Inline-Blocks
When it comes to two-dimensional content, such as a grid of thumb images, flexbox is now well supported in all modern browsers so it is highly recommended, but I also recommend understanding the strategies behind two old-school, tried-and-true techniques (and their shortcomings): 1) Floats (including the need for “clearing” floats with “clear fixes” and 2) inline-blocks (and the inline “space” between them):
Floats
See the Pen CSS Positioning Test #3: Floats by kccnma (@kccnma) on CodePen.0
Note the “clearfix” css used to keep the parent element open
Inline Blocks
See the Pen CSS Positioning Test #4: Inline-Block by kccnma (@kccnma) on CodePen.0
Note the space between each inline-block element
Custom Grid Systems
Custom semantic grids are super helpful and convenient when laying out content. There are multiple ways to code your own grid from scratch (it’s not that hard to do and takes very little time), such as using floats, flexbox, and CSS Grid. Each has it’s own challenges and advantages, so it’s helpful to understand the proc and cons for each. Here’s a simple flexbox grid with useful semantic classnames and helper utility classes that can be easily used (and reused) for many common layout scenarios:
See the Pen Reusable Semantic Grid System for Page Layout: Using Flexbox by kccnma (@kccnma) on CodePen.0
If you completed these exercises, nice work!