How it works
The GidTemplate component is used within the PageLayout.
It is a component that can be utilized when creating layouts that require more detailed customization.
Examples
Basic
Create each area using the GridArea component.
Assign an area name to the area attribute of the GridArea component. The area name must be a unique single alphabet character.
Include all created GridArea components within the GridTemplate component.
Specify the placement of each area using the areas attribute of the GridTemplate component. List the area names in order from the first column of the top row. Use a space character for line breaks.
Specify the size of each row with the rows attribute and the size of each column with the columns attribute.
Top area
Start aside area
Center area
End aside area
Bottom area
vue
<template>
<GridTemplate
areas="ttt sce sbb"
rows="20px 1fr 20px"
columns="150px 1fr 150px"
>
<GridArea
area="t"
background-color="info"
>
Top area
</GridArea>
<GridArea
area="s"
background-color="success"
>
Start aside area
</GridArea>
<GridArea
area="c"
background-color="primary"
>
Center area
</GridArea>
<GridArea
area="e"
background-color="danger"
>
End aside area
</GridArea>
<GridArea
area="b"
background-color="secondary"
>
Bottom area
</GridArea>
</GridTemplate>
</template>
Responsive
Top area
Start aside area
Center area
End aside area
Bottom area
vue
<template>
<GridTemplate
areas="t s c e b"
areas-md="tt sc ee bb"
areas-lg="ttt sce sbb"
rows="20px 0px 1fr 20px 20px"
rows-md="20px 1fr 20px 20px"
rows-lg="20px 1fr 20px"
columns="1fr"
columns-md="150px 1fr"
columns-lg="150px 1fr 150px"
>
<GridArea
area="t"
background-color="info"
>
Top area
</GridArea>
<GridArea
area="s"
background-color="success"
>
Start aside area
</GridArea>
<GridArea
area="c"
background-color="primary"
>
Center area
</GridArea>
<GridArea
area="e"
background-color="danger"
>
End aside area
</GridArea>
<GridArea
area="b"
background-color="secondary"
>
Bottom area
</GridArea>
</GridTemplate>
</template>