Search code examples
javascripttextsizecss-grid

grid items expand in the "x axis" when text gets bigger

Here are photos of my Problem: https://i.sstatic.net/xBFxk.jpg

I created a grid called gridbox, in there are severals items called "box0-8". Everytime I put a text in the box onclick, it gets bigger in the x axis although I used 1fr 1fr 1fr.

// this is my html
<section class="gridbox">
    <div id="field0" class="box0 A D G" onclick="check()"></div>
    <div id="field1" class="box1 A E H" onclick="check()"></div>
    <div id="field2" class="box2 A F" onclick="check()"></div>
    <div id="field3" class="box3 B D" onclick="check()"></div>
    <div id="field4" class="box4 B E G H" onclick="check()"></div>
    <div id="field5" class="box5 B F" onclick="check()"></div>
    <div id="field6" class="box6 C D H" onclick="check()"></div>
    <div id="field7" class="box7 C E" onclick="check()"></div>
    <div id="field8" class="box8 C F G" onclick="check()"></div>
</section>


// This is my CSS gridbox and one container of it
.gridbox{
width: 400px;
height: 400px;
display: grid;
grid-template-colums: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
border: 3px solid #484848;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
cursor: pointer;
}
.box0{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
border: 1px solid #484848;
background-color: #fff;
font-size: 80px;
color: black;

In my opinion the text should not increase after all of I read in the forums, I need help.

Solution

  • You have typo in yor syntax, just change "grid-template-colums" to "grid-template-columns"