Hey there, I'm looking to create a 3x3 grid of checkboxes in a pop-up window. I found a similar example here: https://codepen.io/webdevjones/pen/qBapvrz. I tried using display: flex, but I'm unable to get the checkboxes in a grid format and the labels are not aligned properly.
Below are the HTML and CSS files:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* CSS code goes here */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Meta information -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8295848e82839eaddfc3dcc3d9">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
<title>Sail Vision</title>
</head>
<body>
<div class="modal-container-data">
<div class="overlay">
<div class="data">
<div class="popup-header">
<button class="close-modal modal-trigger-data">X</button>
<h1>Data Selection</h1>
</div>
<div class="popup-body">
<div class="container-box">
<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>Thanks for your help!