Separate line text in CSS grid

January 24, 2022

I want to make a grid in footer where the text is above the grid but also staying in the grid. Position: absolute don’t work because it effects both grid and text, and i want to move them independently of each other.

How it looks:
https://i.imgur.com/norbzp1.png

How i want it to be:
https://i.imgur.com/1fYoQIF.png

Code:

<div class="footer">Footer
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
    </div>

And css:

.footer{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-auto-rows: 50px;
 grid-gap: 10px;
}

.icon{
 display: flex;
 background: rgb(160, 84, 84);
}

>Solution :

You can achieve this by wrapping the grid and the footer with a container.

.footer-header {
  text-align: center;
  padding:20px;
}

.footer-grid {
 grid-column: span 3 / auto;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-auto-rows: 50px;
 grid-gap: 10px;
}

.icon{
   display: flex;
   background: rgb(160, 84, 84);
}

<div class="footer">
  <div class="footer-header">
    Footer
  </div>
  <div class="footer-grid">
        <div class="icon">1</div>
        <div class="icon">2</div>
        <div class="icon">3</div>
        <div class="icon">4</div>
        <div class="icon">5</div>
        <div class="icon">6</div>
  </div>
</div>