2

Recently I started implementing css grid into the application I'm working on and since then I managed to refactor the code into a much cleaner and more cohesive form. Yesterday I got stuck with a problem of filling up the remaining space that's produced by ng-repeating an array of 'sections' that produce divs with different heights. Before I started solving the problem, I thought I already had a solution with grid-auto-flow: dense;, however, this turned out to work differently than I understood. I'm bothered by not being able to fill the circled space in any way.

My current grid code grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); is dynamically setting the number of columns, but I'm prepared to set on a specific number of columns (for example 2), just so I'll be able to fill the row/column space.

Any help or suggestions would be highly appreciated.

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vid
  • 163
  • 1
  • 13

1 Answers1

0

Native css grid can't really do this without some help.

I got the following example from Balázs Sziklai's work on the subject. The number of columns is dynamic, as is the number of rows. Two negatives on it, though: (1) it's not "true" masonry since you'll never see rows stagger such that a row gap intersects with a large block (but that's not what you asked for in your drawing either), and (2) you'd need to explicitly tell the program which blocks are meant to span more rows/columns, likely by applying various classes when you generate the html markup in javascript upon data load.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(180px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}

.grid-item {
    padding: 1rem;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #929796;
    background-color: #333;
    border-radius: 5px;
    &:nth-child(odd) {
        background-color: #424242;
    }
}

.span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.span-3 {
    grid-column-end: span 3;
    grid-row-end: span 4;
}
<div class="grid">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item span-3 grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item span-2 grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
    <div class="grid-item grid-item-9">9</div>
    <div class="grid-item span-2 grid-item-10">10</div>
    <div class="grid-item grid-item-11">11</div>
    <div class="grid-item grid-item-12">12</div>
    <div class="grid-item span-2 grid-item-13">13</div>
    <div class="grid-item grid-item-14">14</div>
    <div class="grid-item grid-item-15">15</div>
    <div class="grid-item grid-item-16">16</div>
    <div class="grid-item span-3 grid-item-17">17</div>
    <div class="grid-item grid-item-18">18</div>
    <div class="grid-item grid-item-19">19</div>
    <div class="grid-item grid-item-20">20</div>
    <div class="grid-item span-2 grid-item-21">21</div>
    <div class="grid-item grid-item-22">22</div>
    <div class="grid-item grid-item-23">23</div>
    <div class="grid-item grid-item-24">24</div>
    <div class="grid-item grid-item-25">25</div>
    <div class="grid-item span-3 grid-item-26">26</div>
    <div class="grid-item grid-item-27">27</div>
    <div class="grid-item grid-item-28">28</div>
    <div class="grid-item grid-item-29">29</div>
    <div class="grid-item grid-item-30">30</div>
    <div class="grid-item grid-item-31">31</div>
    <div class="grid-item grid-item-32">32</div>
    <div class="grid-item grid-item-33">33</div>
    <div class="grid-item grid-item-34">34</div>
    <div class="grid-item grid-item-35">35</div>
    <div class="grid-item grid-item-36">36</div>
    <div class="grid-item grid-item-37">37</div>
    <div class="grid-item grid-item-38">38</div>
    <div class="grid-item grid-item-39">39</div>
    <div class="grid-item span-3 grid-item-40">40</div>
    <div class="grid-item grid-item-41">41</div>
    <div class="grid-item grid-item-42">42</div>
    <div class="grid-item grid-item-43">43</div>
    <div class="grid-item grid-item-44">44</div>
    <div class="grid-item span-3 grid-item-45">45</div>
    <div class="grid-item grid-item-46">46</div>
    <div class="grid-item grid-item-47">47</div>
    <div class="grid-item grid-item-48">48</div>
    <div class="grid-item grid-item-49">49</div>
    <div class="grid-item grid-item-50">50</div>
</div>

But if you're going to be using javascript to load data anyway, you might as well incorporate a more fully-featured masonry layout. Read this article because I'm pretty sure it will contain one or more solutions that you could make work for what you're wanting: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

Grant Noe
  • 985
  • 8
  • 29