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

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 >
        <div >Ringnes-Ronny</div>
        <div >
            <label><input type="checkbox">Polisen<span >59 SEK</span></label>
            <label><input type="checkbox">Valhalla<span >39 SEK</span></label>
            <label><input type="checkbox">Raggare på stureplan<span >49 SEK</span></label>
            <label><input type="checkbox">Monster<span >39 SEK</span></label>
        </div>
        </div>

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

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

CodePudding user response：

This can be achieved using just 2 classes as follows:

CSS -

.checkbox {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
      }
.vertical{
        display:flex;
        flex-direction: column;
      }

HTML -

 <fieldset >
      <div>Ringnes-Ronny</div>
      <div >
        <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 >
        <span >39 SEK</span>
        <span >49 SEK</span>
        <span >39 SEK</span>
      </div>

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

      <div >Avicii</div>
      <div >
        <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 >
        <span >59 SEK</span>
        <span >49 SEK</span>
        <span >(kan ej beställas)</span>
        <span >29 SEK</span>
        <span >49 SEK</span>
      </div>
    </fieldset>

CodePudding user response：

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 >Ringnes-Ronny</div>
        <div >
            <label><input type="checkbox">Polisen<span >59 SEK</span></label>
            <label><input type="checkbox">Valhalla<span >39 SEK</span></label>
            <label><input type="checkbox">Raggare på stureplan<span >49 SEK</span></label>
            <label><input type="checkbox">Monster<span >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:

<div class='grouping'>  //add element to group title and checkboxes.
<div >Ringnes-Ronny</div>
<div >
<label><input type="checkbox">Polisen<span >59 SEK</span></label>
<label><input type="checkbox">Valhalla<span >39 SEK</span></label>
<label><input type="checkbox">Raggare på stureplan<span >49 SEK</span></label>
<label><input type="checkbox">Monster<span >39 SEK</span></label>
    </div>
    </div>

CSS:

.grouping {
margin: 10px, 0;
}