Grouping Choice Checklist Objects Collectively With CSS Grid

Grouping chosen gadgets is a design alternative usually employed to assist customers shortly grasp which gadgets are chosen and unselected. For example, checked-off gadgets transfer up the listing in to-do lists, permitting customers to concentrate on the remaining duties after they revisit the listing.

We’ll design a UI that follows the same grouping sample. As an alternative of merely rearranging the listing of chosen gadgets, we’ll additionally lay them out horizontally utilizing CSS Grid. This additional distinguishes between the chosen and unselected gadgets.

We’ll discover two approaches for this. One entails utilizing auto-fill, which is appropriate when the chosen gadgets don’t exceed the grid container’s boundaries, guaranteeing a secure format. In distinction, CSS Grid’s span key phrase gives one other method that gives larger flexibility.

The HTML is identical for each strategies:

<ul>
  <li>
    <label>
      <enter kind="checkbox" />
      <div class=icon>🍱</div>
      <div class=textual content>Bento</div>
    </label>
  </li>
  <li>
    <label>
      <enter kind="checkbox" />
      <div class=icon>🍡</div>
      <div class=textual content>Dangos</div>
    </label>
  </li>
  <!-- extra listing gadgets -->
</ul>

The markup consists of an unordered listing (<ul>). Nevertheless, we don’t essentially have to make use of <ul> and <li> components for the reason that format of the gadgets shall be decided by the CSS grid properties. Observe that I’m utilizing an implicit <label> across the <enter> components principally as a method to keep away from needing an additional wrapper round issues, however that express labels are typically higher supported by assistive applied sciences.

Technique 1: Utilizing auto-fill

ul {
  width: 250px;
  show: grid;
  hole: 14px 10px;
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: middle;
  /* and many others. */
}

The <ul> ingredient, which comprises the gadgets, has a show: grid type rule, turning it right into a grid container. It additionally has gaps of 14px and 10px between its grid rows and columns. The grid content material is justified (inline alignment) to middle.

The grid-template-columns property specifies how column tracks shall be sized within the grid. Initially, all gadgets shall be in a single column. Nevertheless, when gadgets are chosen, they are going to be moved to the primary row, and every chosen merchandise shall be in its personal column. The important thing a part of this declaration is the auto-fill worth.

The auto-fill worth is added the place the repeat rely goes within the repeat() perform. This ensures the columns repeat, with every column’s observe sizing being the given dimension in repeat() (40px in our instance), that can match contained in the grid container’s boundaries.

For now, let’s guarantee that the listing gadgets are positioned in a single column:

li {
  width: inherit;
  grid-column: 1;
  /* Equal to: 
      grid-column-start: 1;
      grid-column-end: auto; */
  /* and many others. */
}

When an merchandise is checked, that’s when an <li> ingredient :has() a :checked checkbox, we’re choosing that. And after we do, the <li> is given a grid-area that places it within the first row, and its column shall be auto-placed inside the grid within the first row as per the worth of the grid-template-columns property of the grid container (<ul>). This causes the chosen gadgets to group on the high of the listing and be organized horizontally:

li {
  width: inherit;
  grid-column: 1;
  /* and many others. */
  &:has(:checked) {
    grid-area: 1;
    /* Equal to: 
      grid-row-start: 1;
      grid-column-start: auto;
      grid-row-end: auto;
      grid-column-end: auto; */
    width: 40px;
    /* and many others. */
  }
  /* and many others. */
}

And that provides us our closing end result! Let’s examine that with the second methodology I need to present you.

Technique 2: Utilizing the span key phrase

We gained’t be needing the grid-template-columns property now. Right here’s the brand new <ul> type ruleset:

ul {
  width: 250px;
  show: grid;
  hole: 14px 10px;
  justify-content: middle;
  justify-items: middle;
  /* and many others. */
}

The inclusion of justify-items will assist with the alignment of grid gadgets as we’ll see in a second. Listed here are the up to date types for the <li> ingredient:

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* Equal to: 
     grid-column-start: 1;
     grid-column-end: span 6; */
  /* and many others. */
}

As earlier than, every merchandise is positioned within the first column, however now in addition they span six column tracks (since there are six gadgets). This ensures that when a number of columns seem within the grid, as gadgets are chosen, the next unselected gadgets stay in a single column below the chosen gadgets — now the unselected gadgets span throughout a number of column tracks. The justify-items: middle declaration will preserve the gadgets aligned to the middle.

li {
  width: inherit;
  grid-column: 1 / span 6;
  /* and many others. */
  &:has(:checked) {
    grid-area: 1;
    width: 120px;
    /* and many others. */
  }
  /* and many others. */
}

The width of the chosen gadgets has been elevated from the earlier instance, so the format of the choice UI will be considered for when the chosen gadgets overflow the container.

Choice order

The order of chosen and unselected gadgets will stay the identical because the supply order. If the on-screen order must match the consumer’s choice, dynamically assign an incremental order worth to the gadgets as they’re chosen.

onload = ()=>{
  let i=1;
  doc.querySelectorAll('enter').forEach((enter)=>{
    enter.addEventListener("click on", () => {
      enter.parentElement.parentElement.type.order = enter.checked ? i++ : (i--, 0);
    });
  });
}

Wrapping up

CSS Grid helps make each approaches very versatile and not using a ton of configuration. Through the use of auto-fill to put gadgets on both axis (rows or columns), the chosen gadgets will be simply grouped inside the grid container with out disturbing the format of the unselected gadgets in the identical container, for so long as the chosen gadgets don’t overflow the container.

In the event that they do overflow the container, utilizing the span method helps preserve the format regardless of how lengthy the group of chosen gadgets will get in a given axis. Some design alternate options for the UI are grouping the chosen gadgets on the finish of the listing, or swapping the horizontal and vertical construction.

---

Grouping Choice Checklist Objects Collectively With CSS Grid initially printed on CSS-Tips, which is a part of the DigitalOcean household. It is best to get the publication.