Separate line text in CSS grid

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 1:

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>

Solution 2:

Also you can use grid-template-areas, for example

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

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

.footer-head {
  text-align: center;
  grid-area: footer-head; 
}

<div class="footer">
        <div class="footer-head">Footer</div>
        <div id="icon1" class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
    </div>

Separate line text in CSS grid

Solution 1:

Solution 2:

Related

Recent Posts