0

I have written up some code in Playground but isn't working as I expected.

I want to make the buttons in LWC the same size as in picture below (which in turn will naturally make the spacing the same) :

enter image description here

How do I go about achieving this? Is this even possible?

1 Answer 1

1

As you are working with divs, that could be achieved with css grid layout. Please find below the best guide I found about it.

CSS Grid Guide

CSS Grid also gives a very good responsive result, and it is always a good option in terms of layouts.

Every div you have will be dropped into a cell of your css grid, but you first must specify the columns and rows you want for it.

6
  • hmm .. I highly doubt can use CSS on <lightning-button>
    – compski
    Commented Jan 17, 2020 at 8:28
  • You do not apply the grid to the buttons, but to the container. Commented Jan 17, 2020 at 9:17
  • Hi! Did this make it for you to solve your problem? Commented Jan 22, 2020 at 8:35
  • No it didn't. How does editing the container make the button the same size?
    – compski
    Commented Jan 22, 2020 at 8:45
  • CSS Grid lets you create a layout in which you control the content. Haven't tried but I'd say that if your columns are limited to i.e. 100 px, and your button is 100% width, it will adjust to its container. Commented Jan 22, 2020 at 8:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .