'Unequal Columns CSS masonry grid [duplicate]

Hi I am stuck on a css only masonry grid, I have the masonry part but I would like the first column to have a width of about 35% and 2nd column 75%. Any help is appreciated. I have tried with grid and column but it does not seem to work, here is a link to my codepen:

https://codepen.io/louise-fourie/pen/JjOgpZj

<h1>CSS Grid - Masonry Layout</h1>

<div class="grid">
<div class="content flow">
  
   <img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
  </div>
<div class="content flow featured">
   <img src="https://unsplash.it/500/200" alt="">
</div> 
<div class="content flow"> 
   <img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
  <img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
   <img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
  <img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
  <img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
  <img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
</div>
<div class="content flow">
  <img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
  <img src="https://unsplash.it/500/200" alt="">
</div>
  </div>

    <style>
.grid {
  --gap: 1em;
  --columns: 2;
/*   max-width: 60rem;
  margin: 0 auto; */
  display: column;
  columns: var(--columns);
  gap: var(--gap);
  
}

.grid > * {
  break-inside: avoid;
  margin-bottom: var(--gap);
}

img {
  max-width: 100%;
  width:100%;
}
.flow {
 grid-column-start: 1;
  grid-column-end: 1;
  
}
.flow:nth-child(even) {
   grid-column-start: 2;
  grid-column-end: 12;
}

</style>
htmlcss


Solution 1:[1]

Use display grid instead of display column:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid {
        display: grid;
        grid-template-columns: 30% 1fr;
        grid-row: unset;

    }

    .grid>* {
        break-inside: avoid;
        margin-bottom: var(--gap);
    }

    img {
        max-width: 100%;
        width: 100%;
    }

    .flow {
        grid-column-start: 1;
        grid-column-end: 2;

    }

    .flow:nth-child(even) {
        grid-column-start: 2;
        grid-column-end: 12;
    }
</style>

<body>

    <div class="grid">
        <div class="content flow">
            <img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
            <img src="https://unsplash.it/500/200" alt="">
            <img src="https://unsplash.it/500/200" alt="">
            <img src="https://unsplash.it/500/200" alt="">
            <img src="https://unsplash.it/500/200" alt="">
        </div>
        <div class="content flow">
            <img src="https://unsplash.it/500/200" alt="">
            <img src="https://unsplash.it/500/200" alt="">
            <img src="https://unsplash.it/500/200" alt="">
            <img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
            <img src="https://unsplash.it/500/200" alt="">
        </div>
    </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions