Is there a way to specify different widths for columns in CSS3?
Solution 1:
No, there isn't a way.
The feature is designed for content that flows between equal columns.
Solution 2:
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
Solution 3:
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>