How to put several checkboxes in a grid?-CodePudding

Hello I would like to put several checkboxes in a popup as a 3x3 grid. I was able to find something similar as in this example: https://codepen.io/webdevjones/pen/qBapvrz . I tried to use display: flex but I only get one column and the labels are also no longer aligned with the checkboxes.

Here is the html and css files :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root{
    /* ===== Colors ===== */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #1c1a1a;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* ===== Transition ===== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}

/*--------------------- FENETRE MODAL DONNEES ---------------------*/

/*Paramètres de la fenêtre modal*/
.modal-container-data{
    display: flex;
    position: fixed;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #1c1a1a;
    background: rgba(0, 0, 0, 0.4);
}

/*Paramétre des panneaux */
.data{
    position: relative;
    top: 25%;
    background-color: rgb(170, 170, 170);
    margin: 100px auto;
    padding: 0;
    width: 300px;
    max-width: 85%;
}

/**/
.data .popup-header{
    padding: 2px 16px;
    background-color: #ffffff;
    color: #1c1a1a;
    display: flex;
}

/*Paramètres du texte de la modal*/
.data .popup-header h1{
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

/*Paramètre du bouton de la fenêtre modal*/
.data .close-modal{
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 10px;
    padding: 1.5px 20px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: #fff;
    color: rgb(0, 0, 0);
}

/*Activation du background lors du passage de la souris*/
.data .close-modal:hover{
    color: #FFF;
    background: rgb(188, 15, 15);
}

/*Paramètres du body de la popup*/
.data .popup-body{
    padding: 1px 16px;
    display: flex;
    justify-content: center;
}

.container-box{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 1em;
}
.data .popup-body input{
    padding: 1em 0em;
}

.data .popup-body label{
    display: inline;
    padding-left: 10px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    
    <!----===== CSS ===== -->
    <link rel="stylesheet" href="style.css">

    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

    <title>Sail Vision</title>
  </head>
  <body>
      <div >
        <div >
          <div >
            <div >
              <button >X</button>
              <h1>Choix des données</h1>              
            </div>
            <div >
              <div >
                <input type="checkbox" id="entry" name="Entry">
                <label for="entry">Entry</label>
                <input type="checkbox" id="camber forward" name="camber forward">
                <label for="camber forward">Camber forward</label>
                <input type="checkbox" id="camber" name="camber">
                <label for="camber">Camber</label>
                <input type="checkbox" id="draft" name="draft">
                <label for="draft">Draft</label>
                <input type="checkbox" id="camber after" name="camber after">
                <label for="camber after">camber after</label>
                <input type="checkbox" id="exit" name="exit">
                <label for="exit">Exit</label>
                <input type="checkbox" id="twist" name="twist">
                <label for="twist">Twist</label>
                <input type="checkbox" id="lateral sag" name="lateral sag">
                <label for="lateral sag">Lateral sag</label>
                <input type="checkbox" id="longitudinal sag" name="longitudinal sag">
                <label for="longitudinal sag">Longitudinal sag</label>
              </div>
            </div>
          </div>
        </div>
      </div>
  </body>
</html>

Regards,

CodePudding user response：

You can use CSS Grid - just make sure that the grid container element only has one child per checkbox; I've done it here by wrapping the input in the label.

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #E4E9F7;
}

.data {
  margin: auto;
  background-color: #eee;
  padding: 0;
  width: 500px;
}

.container-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
  padding: 1em;
}

.container-box label {
  white-space: nowrap;
}

    <div >
      <div >
        <div >
          <label for="entry"><input type="checkbox" id="entry" name="Entry">
                Entry</label>
          <label for="camber forward"><input type="checkbox" id="camber forward" name="camber forward">
                Camber forward</label>
          <label for="camber"><input type="checkbox" id="camber" name="camber">
                Camber</label>
          <label for="draft"><input type="checkbox" id="draft" name="draft">
                Draft</label>
          <label for="camber after"><input type="checkbox" id="camber after" name="camber after">
                Camber after</label>
          <label for="exit"><input type="checkbox" id="exit" name="exit">
                Exit</label>
          <label for="twist"><input type="checkbox" id="twist" name="twist">
                Twist</label>
          <label for="lateral sag"><input type="checkbox" id="lateral sag" name="lateral sag">
                Lateral sag</label>
          <label for="longitudinal sag"><input type="checkbox" id="longitudinal sag" name="longitudinal sag">
                Longitudinal sag</label>
        </div>
      </div>
    </div>

CodePudding user response：

I recommend checking out the "display: grid" documentation on w3 schools https://www.w3schools.com/css/css_grid.asp