CODEWITHSUNDEEP
htmlcsscheckboxcss-grid
Kevin McGreal
Kevin McGreal

Reputation: 49

CSS How would I get these checkboxes into a grid layout

I want to set these checkboxes up in a table style grid without using a table in HTML. I was trying CSS but it seems like I will need to add a class to each tag for each slot.

Is there a way I can avoid this?

<div class = permissions_grid>
          <div class="column_labels"></div>
            <label>All Members</label>
            <label>Relevant Experience</label>
            <label>HUB Moderators</label>
            <label>Invited Members</label>
          </div>
          <div class="row_edit_documents">
            <label>Edit Documents</label>
            <input type="checkbox" class="all-D" name="edit_docs" value="all">
            <input type="checkbox" class="relevant" name="edit_docs" value="relevant">
            <input type="checkbox" class="moderators" name="edit_docs" value="moderators">
            <input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
          </div>
          <div class = "row_add_categories">
            <label>Add Feedback Categories</label>
            <input type="checkbox" class="all-C" name="add_cat" value="all" checked>
            <input type="checkbox" class="relevant" name="add_cat" value="relevant">
            <input type="checkbox" class="moderators" name="add_cat" value="moderators">
            <input type="checkbox" class="invited" name="add_cat" value="invited">
          </div>
          <div class = "row_move_com_cat">
            <label>Move Comments and Categories</label>
            <span class="x">X</span>
            <input type="checkbox" class="relevant" name="move" value="relevant">
            <input type="checkbox" class="moderators" name="move" value="moderators" checked>
            <input type="checkbox" class="invited" name="move" value="invited" checked>
          </div> 
        </div>

The first row starts at position 2 which I think I can easily mark in CSS. But How do I make sure all of the inputs and labels are even spaced?

Thank you

Kevin

Upvotes: 1

Views: 2366

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4435

You can use flexbox to get the result you want.

You are probably having some issues to do an error in your HTML.

In the top of your html you close a div tag early.

<div class="column_labels"></div> <!-- EXTRA CLOSING DIV TAG HERE -->
  <label>All Members</label>
  <label>Relevant Experience</label>
  <label>HUB Moderators</label>
  <label>Invited Members</label>
</div>


.permissions_grid {
  display: flex;
  flex-flow: column nowrap;
}
.permissions_grid > div {
  display: flex;
  flex-flow: row nowrap;
  flex-basis: 20%;
  text-align: center;
}

.permissions_grid > div > * {
  flex: 1;
}
<div class=permissions_grid>
  <div>
    <label></label>
    <label>All Members</label>
    <label>Relevant Experience</label>
    <label>HUB Moderators</label>
    <label>Invited Members</label>
  </div>
  <div>
    <label>Edit Documents</label>
    <input type="checkbox" class="all-D" name="edit_docs" value="all">
    <input type="checkbox" class="relevant" name="edit_docs" value="relevant">
    <input type="checkbox" class="moderators" name="edit_docs" value="moderators">
    <input type="checkbox" class="invited" name="edit_docs" value="invited" checked>
  </div>
  <div>
    <label>Add Feedback Categories</label>
    <input type="checkbox" class="all-C" name="add_cat" value="all" checked>
    <input type="checkbox" class="relevant" name="add_cat" value="relevant">
    <input type="checkbox" class="moderators" name="add_cat" value="moderators">
    <input type="checkbox" class="invited" name="add_cat" value="invited">
  </div>
  <div>
    <label>Move Comments and Categories</label>
    <span class="x">X</span>
    <input type="checkbox" class="relevant" name="move" value="relevant">
    <input type="checkbox" class="moderators" name="move" value="moderators" checked>
    <input type="checkbox" class="invited" name="move" value="invited" checked>
  </div>
</div>

Upvotes: 1

Related Questions