Question 44631 in Html Question posted in
Some basic documentation can be found here.

HTML display:grid not configuring columns

Right, this has got to be the world must idiotic thing I have ever come across. Why – despite following the tutorial on here to the letter – can I not get the below into four columns?

Absolutely ridiculous.

footer {
    background-color: #000861;
    color: #fff;
    padding: 20px 10px;
    display: grid;
    grid-gap: 10px;
}

footer div{
    border: solid 2px #fff;
    grid-template-columns: auto auto auto auto;
}
<footer>
    <div class="">Text</div>
    <div class="">Text</div>
    <div class="">Text</div>
    <div class="">Text</div>
    <div class="">Text</div>
    <div class="">Text</div>
</footer>
Tags:

2

Answers


  1. 0

    you need to add grid-template-columns inside the footer instead

    footer{
    background-color: #000861;
    color: #fff;
    padding: 20px 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);

}

footer div{
    border: solid 2px #fff;  
}
    <footer>
        <div class="">Text</div>
        <div class="">Text</div>
        <div class="">Text</div>
        <div class="">Text</div>
        <div class="">Text</div>
        <div class="">Text</div>
    </footer>
    Login or Signup to reply.
  2. 0

    Use grid-template-columns: repeat(4, 1fr); css property to your footer break it into column

    P.S

    You can use any number instead 4

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search