\n
<Container>\n {elements.map((e, i) => (\n <StyledLabel key={i}>\n <StyledInput\n type="radio"\n />\n <Option>{e.text}</Option>\n </StyledLabel>\n ))}\n</Container>\n
\nconst Option = styled.span`\n display: flex;\n border: 1px solid grey;\n height: 30px;\n font-size: 14px;\n cursor: pointer;\n color: grey;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n overflow: hidden;\n text-transform: uppercase;\n width: 1fr;\n`;\n\nconst StyledLabel = styled.label`\n cursor: pointer;\n`;\n\nconst StyledInput = styled.input`\n display: none;\n`;\n\nconst Container = styled.div`\n width: 300px;\n display: grid;\n grid-gap: 5px;\n grid-template-columns: auto auto;\n`;\n
\n","author":{"@type":"Person","name":"some nooby questions"},"upvoteCount":1,"answerCount":2,"acceptedAnswer":{"@type":"Answer","text":"Instead of using auto
:
grid-template-columns: auto auto;\n
\nYou 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.
\nCheck it out:
\n.container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n\n.item {\n outline: 1px solid black;\n}
\r\n<div class=\"container\">\n <div class=\"item\">\n Column one.\n </div>\n <div class=\"item\">\n 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.\n </div>\n</div>
\r\nNotice you can also use:
\n grid-template-columns: repeat(2, 1fr);\n
\n","author":{"@type":"Person","name":"Leo"},"upvoteCount":2}}}Reputation: 693
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;
`;
Upvotes: 1
Views: 1812
Reputation: 2317
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>
Upvotes: 0
Reputation: 947
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);
Upvotes: 2