//I have created checkboxes using checkgroup the checkboxes are in single line iam trying to align in two columns but iam not succeded.
<lightning-checkbox-group name="Checkbox Group" label="Checkbox Group" options={options} value={value} onchange={handleChange}></lightning-checkbox-group> <p>Selected Values are: {selectedValues}</p>
Thanks for any Help
#Trailhead #LWC #LWC Development #LWC Component #Lightning #Lightning Web Components
To display checkboxes in two columns using lightning-checkbox-group, you'll need to adjust the layout using CSS because lightning-checkbox-group doesn't natively support multi-column layouts out of the box.
You can achieve the two-column layout by wrapping the checkboxes in a custom div container and using CSS Grid or Flexbox to display the checkboxes in two columns.
You can use something like this :
/* Styling for the checkbox container to use grid */
.checkbox-container {
display: grid; /* Use grid layout */
grid-template-columns: repeat(2, 1fr); /* Create two equal columns */
gap: 16px; /* Add space between checkboxes */
max-width: 600px; /* Optional: set a max width */
}
/* Ensure the checkbox options fit well inside each column */
.lightning-checkbox-group .slds-checkbox_faux {
margin-bottom: 8px; /* Adjust the spacing between checkboxes */
}
