πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Create Two Columns in CSS

How to Create Two Columns in CSS

Ferenc Almasi β€’ 2020 November 04 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

You can create columns in CSS without having to set up any layout in HTML. The column property is intended for this purpose along with many multi-column properties for styling such as column-gap or column-width.

Copied to clipboard!
.two-columns {
    columns: 2;
}
columns.css

The example above will create a two column layout. The other two properties that are related to columns are the previously mentioned gap and width.

Copied to clipboard!
.columns {
    column-gap: 10px;  /* Sets the space between columns */
    column-width: 33%; /* Sets the width of the individual columns */
}
columns.css
How to create two columns in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.