How to create checkboxes with CSS Grid

The CSS Grid Layout Module can not only solve the problem of massive layout, but also solve well how to create a label checkbox (check box). Although there is a relatively simple method to create labels that appear after the check box, it is not easy to create labels that appear before the checkbox.

1. Enable the Check Box feature to conveniently select files

How to create a checkbox without CSS Grid

Creating a label after the checkbox is something that developers have done for a long time. This technique is one of the main and old but powerful examples that CSS can own.

Below is the code that many people are familiar with, create a label after the selected checkbox:

HTML:

CSS:

A label after the checkbox will look like this (however, you can use another style):

The above CSS code uses adjacent sibling combinator set marked by + key. When the checkbox is in the status: checked , an element after it (usually label) can be styled using this method.

This is a simple and effective technique. The set of adjacent siblings selects the next element , which means the label must come after the checkbox in the HTML source code. So, to create a label that appears before the checkbox on the screen, we cannot move it before the checkbox in the source code, because the sibling selector did not exist in CSS. Which leaves only one option: repositioning the checkbox and label using transforms, position, margin or another CSS attribute, so the label will appear on the left checkbox on the screen.

Problems with traditional methods

There is no problem with the technique above but it may not work in certain situations such as the reorder positions of the checkbox and label making it inactive. For example, you may have to resize or reposition the checkbox according to the device it is displayed on. When that happens, you also need to reposition the label because it doesn't automatically sort to fit the relocation or resizing of the checkbox.

We can eliminate this disadvantage if we provide some solid layouts for the checkbox and label, instead of locating them on the page. However, most layout systems, such as tables or columns, require you to add a pre-checkbox mark in the source code to make it appear the same way on the screen. That's what we don't want to do because the next element selector on label will stop working.

On the other hand, the CSS Grid is a layout system regardless of the position or order of the elements in the source code. Therefore, the CSS Grid is an ideal solution for attaching labels that appear before the checkbox.

How to create checkboxes with CSS Grid

Let's start with HTML code . The order of checkbox and label will remain the same. We just need to add both to a grid.

HTML

The attached CSS is as follows:

Basically, the display: grid attribute turns an element into a grid container , grid-area defining the grid area that an element belongs to and grid-template-areas constitutes a grid diagram consisting of different grid areas. .

In the above code, there are two grid areas: " left " and " right ", they will form two columns of a grid row. Checkbox belongs to " right " and label area belongs to " left " area.

Since we do not change the checkbox and label relative position in the source code, we can still use the adjacent sibling combination:

CSS

Note that a grid item is always blocked, it appears with a box around it called a grid-level box . If you don't want that, the example for a label places a wrapper on that item (wraps it in another element) and turns it into the grid area.

I wish you all success!