CSS Layouts

• CSS Layouts
  • Columns in CSS
  • Reference

---

• Vertically Divided Element
• Vertically & Horizontally Center Element

---

Columns in CSS

We can simply make multiple columns using css property columns. The columns CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths. columns is a shorthand for the following CSS properties:

• column-count
• column-width

.columns {
    color: white;
    padding: 2rem 1rem;
    columns: 250px auto;
    text-align: justify;
}

Above code will give you columns with 250px as width, with number of columns adjusting to the screen size w.r.t the column’s size.

Example Link

---

Reference

• Columns in CSS
• Positioning