The CSS display value inline-grid makes an element an inline-level grid container. It provides Grid features while keeping the element in the current line of page flow, much like inline-block. section 10.3.3 section 2.2
Styling radio buttons and checkboxes
Native radio and checkbox inputs are inline by default, so set their dimensions and use inline-grid to keep them beside their labels. Add place-content: center to center the checked-state disk or check mark. section 10.3.3
Listing 10.9 Styled radio and checkbox inputs
input[type="radio"],
input[type="checkbox"] {
appearance: none;
background-color: var(--background);
margin: 0;
width: 1.75em;
height: 1.75em;
border: 1px solid currentcolor; #1
display: inline-grid; #2
place-content: center; #2
}
input[type="radio"] { border-radius: 50% }
input[type="checkbox"] { border-radius: 4px }
This listing applies inline-grid to radio and checkbox inputs alongside dimensions, borders, and centered content. section 10.3.3
Choose between the two display values according to the element's position in the page flow:
- Use grid when the container should be block-level, occupy the available horizontal space, and begin on a new line. section 2.2
- Use inline-grid when the container should remain inline with previous content while retaining access to Grid features. section 10.3.3 section 2.2
