How to use Grid when having different amount of items in each grid

user15227357 0
Viewed 39

So I want to figure out if there is a way to get my code to look something like this: What I want it to look like

But my code is looking like this: My Code

I'm farely new to html and css but what I've tried is to put the grid in a 3x2 layout, where my logic is that the label and Checkbox are my rows, so 2 and I've got 3 of them. But I can't manage to get it the way i want. I've also tried flex but I can't manage to get the same result.

.checkbox {
            border: 0;
            display: grid;
            grid-template-columns: max-content max-content;
            align-items: center;
            padding-left: 0;
        }
        
        .boxContainer {
            min-width: 40vh;
        }

        .checkbox label {
            display: block;
            position: relative;
            margin-bottom: .25em;
        }

        .checkbox label input {
            margin-right: .5em;
        }

        .checkbox .time {
            position: absolute;
            right: 30%
        }
<fieldset class="checkbox">
        <div class="title">Ringnes-Ronny</div>
        <div class="boxContainer">
            <label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
            <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
            <label><input type="checkbox">Raggare på stureplan<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
        </div>
        </div>

        <div class="title">Miss Li</div>
        <div class="boxContainer">
            <label><input type="checkbox">Instruktionsboken<span class="time">39 SEK</span></label>
            <label><input type="checkbox">Komplicerad<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Starkare<span class="time">(kan ej beställas)</span></label>
        </div>

        <div class="title">Avicii</div>
        <div class="boxContainer">
            <label><input type="checkbox">Wake Me Up<span class="time">59 SEK</span></label>
            <label><input type="checkbox">Hey Brother<span class="time">49 SEK</span></label>
            <label><input type="checkbox">Waiting For Love<span class="time">(kan ej beställas)</span></label>
            <label><input type="checkbox">You Make Me<span class="time">29 SEK</span></label>
            <label><input type="checkbox">Levels<span class="time">49 SEK</span></label>
        </div>
    </fieldset>

css html
2 Answers

It looks like you might have an extra in your first code block.

The major difference I saw between your code what you're trying to copy seems to be the white space between the checkbox groups. To address that you can add another element and put some margins around the whole section. Sample HTML and CSS below. Was there any other aspects that you were having issues with?

CSS grid may help if you need more control over how this block expands or shrinks on different screens, but may overcomplicate things.

Your code:

    <div class="title">Ringnes-Ronny</div>
            <div class="boxContainer">
                <label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
                <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
                <label><input type="checkbox">Raggare på stureplan<span class="time">49 SEK</span></label>
                <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
            </div>
            </div>

//duplicate

have you tried wrapping each section in a div and adding a margin to create some extra white space?

Example: HTML:

    .grouping {
    margin: 10px, 0;
    }
    <div class='grouping'>  //add element to group title and checkboxes.
    <div class="title">Ringnes-Ronny</div>
    <div class="boxContainer">
    <label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
    <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
    <label><input type="checkbox">Raggare på stureplan<span class="time">49 SEK</span></label>
    <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
        </div>
        </div>

sosebee_dev0

This can be achieved using just 2 classes as follows:

.checkbox {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
      }
.vertical{
        display:flex;
        flex-direction: column;
      }
 <fieldset class="checkbox">
      <div>Ringnes-Ronny</div>
      <div class="vertical">
        <label><input type="checkbox" />Polisen</label>
        <label><input type="checkbox" />Valhalla</label>
        <label><input type="checkbox" />Raggare på stureplan</label>
        <label><input type="checkbox" />Monster</label>
      </div>
      <div class="vertical">
        <span class="time">39 SEK</span>
        <span class="time">49 SEK</span>
        <span class="time">39 SEK</span>
      </div>

      <div>Miss Li</div>
      <div class="vertical">
        <label><input type="checkbox" />Instruktionsboken</label>
        <label><input type="checkbox" />Komplicerad</label>
        <label><input type="checkbox" />Starkare</label>
      </div>
      <div class="vertical">
        <span class="time">39 SEK</span>
        <span class="time">49 SEK</span>
        <span class="time">(kan ej beställas)</span>
      </div>

      <div class="title">Avicii</div>
      <div class="vertical">
        <label><input type="checkbox" />Wake Me Up</label>
        <label><input type="checkbox" />Hey Brother</label>
        <label><input type="checkbox" />Waiting For Love</label>
        <label><input type="checkbox" />You Make Me</label>
        <label><input type="checkbox" />Levels</label>
      </div>
      <div class="vertical">
        <span class="time">59 SEK</span>
        <span class="time">49 SEK</span>
        <span class="time">(kan ej beställas)</span>
        <span class="time">29 SEK</span>
        <span class="time">49 SEK</span>
      </div>
    </fieldset>

Aadesh0
Related