Как разделить нижний колонтитул по столбцам вместе с содержимым нижнего колонтитула?

Question

Я устанавливаю нижний колонтитул с заголовком заголовка как О, свяжитесь с нами, популярные поисковые запросы, блоги.Я хочу отобразить содержимое под заголовком нижнего колонтитула, но он не работает.Я получаю вывод, как будто содержимое отображается рядом с заголовком нижнего колонтитула.

Я пытался использовать систему сетки, но пока безрезультатно.

Contact us            Services          Blogs     

no:12, 8th cross,     Find doctors       Twitter
Rajajinagar,          Find hospitals     Facebook
Bangalore.

HTML Code:

<mat-grid-list cols="4" row Height="4:0.8" class="list"> 
  <mat-grid-tile >Contact Us <h3>Contact us</h3> </mat-grid-tile> 
  <mat-grid-tile>Services</mat-grid-tile> 
  <mat-grid-tile>About Us</mat-grid-tile> 
  <mat-grid-tile>Popular Searches</mat-grid-tile> 
</mat-grid-list>

Answer 1

Вы можете использовать mat-grid-tile-header, чтобы определить заголовок (например, Свяжитесь с нами, Службы и т. Д.), А затем определить содержание ниже этого - но все еще в пределах mat-grid-tile

<mat-grid-list cols="3" row Height="4:0.8" class="list"> 
  <mat-grid-tile>
    <mat-grid-tile-header>
      <h3>Contact us</h3>
    </mat-grid-tile-header>
    no:12, 8th cross,<br/>
    Rajajinagar,<br/>
    Bangalore.
  </mat-grid-tile> 
  <mat-grid-tile>
    <mat-grid-tile-header>
      <h3>Services</h3>
    </mat-grid-tile-header>
    Find doctors<br/>
    Find hospitals
  </mat-grid-tile> 
  <mat-grid-tile>
    <mat-grid-tile-header>
      <h3>Blogs</h3>
    </mat-grid-tile-header>  
    Twitter<br/>
    Facebook
  </mat-grid-tile> 
</mat-grid-list>

Пожалуйста, посмотрите этот StackBlitz для рабочего демо.