How to Create Two Columns in 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.

.two-columns {
    columns: 2;
}

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.

.columns {
    column-gap: 10px;  /* Sets the space between columns */
    column-width: 33%; /* Sets the width of the individual columns */
}

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The CSS column property