Make the columns the same width inside Grid React

Question

I have a grid list like this below, but the problem is that columns have different widths. It is because the lengths of texts inside are different. Can I somehow ignore the text inside and do that the width of the columns is the same?

<Container>
    {elements.map((e, i) => (
        <StyledLabel key={i}>
        <StyledInput
            type="radio"
        />
        <Option>{e.text}</Option>
        </StyledLabel>
    ))}
</Container>

const Option = styled.span`
  display: flex;
  border: 1px solid grey;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  color: grey;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  text-transform: uppercase;
  width: 1fr;
`;

const StyledLabel = styled.label`
  cursor: pointer;
`;

const StyledInput = styled.input`
  display: none;
`;

const Container = styled.div`
  width: 300px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: auto auto;
`;

Can you include a codesandbox so that we can check by running? — Imanpal Singh
– Imanpal Singh, Commented Jan 6, 2022 at 10:10

Leo · Accepted Answer · 2022-01-06 10:29:51Z

2

Instead of using auto:

  grid-template-columns: auto auto;

You can solve it by using the fraction unit fr.

A fraction is (in this case) the available width divided by the amount of columns. Then you'll have the same width for each column no matter how long the content is.

Check it out:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.item {
  outline: 1px solid black;
}

<div class="container">
  <div class="item">
    Column one.
  </div>
  <div class="item">
    A second column with more text than the first one. A second column with more text than the first one. A second column with more text than the first one.
  </div>
</div>

Notice you can also use:

  grid-template-columns: repeat(2, 1fr);

answered Jan 6, 2022 at 10:29

Leo

96510 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arman Ebrahimi · Accepted Answer · 2022-01-06 10:59:16Z

0

Try this:

You can also use from flex instead grid:

.container {
  display: flex;
  border: solid green;
  justify-content: space-between;
}

.item{
  box-sizing: border-box;
  text-align: center;
  padding:5px;
  background-color: red;
  width: 20%;/* instead 25%,because to be made the gap. */
  border: solid;
}

<div class="container">
  <div class="item">AAAAAAAAA</div>
  <div class="item">BBB</div>
  <div class="item">CCCCCCC</div>
  <div class="item">D</div>
</div>

edited Jan 6, 2022 at 10:59

answered Jan 6, 2022 at 10:46

Arman Ebrahimi

2,3553 gold badges11 silver badges21 bronze badges

Collectives™ on Stack Overflow

Make the columns the same width inside Grid React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related