Is there a way to specify different widths for columns in CSS3?

Technically it's not possible to do it with the multi-column property only but for a 2-column layout you can accomplish that by setting a negative margin on one of the sides.

div {
    width: 400px;
    background-color: lightgreen;
}

ul {
    -moz-columns: 2 auto;
    -webkit-columns: 2 auto;
    columns: 2 auto;
    -moz-column-gap: 80px;
    -webkit-column-gap: 80px;
    column-gap: 80px;
    margin-right: -80px;
}
<div>
    <ul>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem Ipsum Lorem Ipsum</li>
        <li>Lorem</li>
        <li>Lorem</li>
        <li>Lorem</li>
        <li>Lorem</li>
    </ul>
</div>

See JSFiddle Demo


You could use the grid property:

.container-grid {
  display: grid;
  grid-template-columns: 20px 50px; /*columns widths*/
  height: 40vh;
}

.col-1 {
  background-color: blue;
}

.col-2 {
  background-color: green;
}
<div class="container-grid">
  <div class="col col-1"></div>
  <div class="col col-2"></div>
</div>

No, there isn't a way.

The feature is designed for content that flows between equal columns.

Tags:

Css

Css Multicolumn Layout

Recent Posts