GridLesson 309Free preview
2 Column Layout
This lesson is part of How To · All levels
Summary
The layout of the two columns divides the content area into two adjacent sections, such as the main article and the sidebar. The easiest modern way is CSS Grid with grid-template-columns, or Flexbox with flex-based. On a small screen, columns are usually stacked into one to keep text easy to read.
Key points
- CSS Grid two columns can be created with grid-template-columns: 2fr 1fr
- Flexbox uses display: flex and flex property on column sub-series
- The gap property regulates the intercolumn distance without additional margin
- Media queries stack columns when the screen width is small
- The float is still in the old code, but it requires a clearfix
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.