display checkboxes in grid format

Question

I want to display check boxes in grid format having 3 columns. Something like below

Item1 Item2 Item3
Item Item5 Item6
4
Item7 Item8 Item9

I am able to display it in grid format with the below code but in case of Item7, instead of positioning correctly, it starts displaying it below Item5. Which I don't want to.

Below is the code which I am using

<div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
 <div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
       <input type="checkbox" id="user" name="users" value="{{x}}"  />
             {{x}}
 </div>

I have also tried replacing div with ul and <li but still the same result. Please let me know what I am missing.

ksav · Accepted Answer · 2020-09-01 07:09:46Z

1

form {
  width: 60px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

<form>
  <label>
    <input type="checkbox" value=""/>item1
  </label>
  <label>
    <input type="checkbox" value=""/>item2
  </label>
  <label>
    <input type="checkbox" value=""/>item3
  </label>
  <label>
    <input type="checkbox" value=""/>item4
  </label>
  <label>
    <input type="checkbox" value=""/>item5
  </label>
  <label>
    <input type="checkbox" value=""/>item6
  </label>
  <label>
    <input type="checkbox" value=""/>item7
  </label>
  <label>
    <input type="checkbox" value=""/>item8
  </label>
  <label>
    <input type="checkbox" value=""/>item9
  </label>
</form>

answered Sep 1, 2020 at 7:09

ksav

20.9k6 gold badges52 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zach Jensz · Accepted Answer · 2020-09-01 07:37:53Z

0

You can use flexbox Note that you should avoid using inline styles! Create a style.css file, link it with<link rel="stylesheet" href="style.css"> and paste in the following code:

.row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}

edited Sep 1, 2020 at 7:37

answered Sep 1, 2020 at 5:47

Zach Jensz

4,0986 gold badges19 silver badges32 bronze badges

4 Comments

Akash Veer Over a year ago

But how will it work if I have more items? No. of items can be anything. Is there any solution for that?

Zach Jensz Over a year ago

If you could have any number of items and want them 3 wide I think flexbox would be your best option

Akash Veer Over a year ago

thank you it did do the job, but since I have these check boxes in an accordion and will be displayed only after collapse. When I add this CSS, accordion placed below this doesn't move down.

Zach Jensz Over a year ago

you could try flex-basis: 33% on each checkbox

Rayees AC · Accepted Answer · 2020-09-01 06:55:23Z

Try Bootstrap grid method,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item1
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item2
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item3
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item4
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item5
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item6
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item7
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item8
 </div>
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item9
 </div>
</div>

Collectives™ on Stack Overflow

display checkboxes in grid format

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related