Star

The Area

<area-l layout="template:(a-b|c-c) gap:0">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
</area-l>

The area component allows you to design complex grid layout templates.

When to use ?

Use the area component when you need a complex grid where all cells doesn’t have the same dimensions.

Attributes

  • template : defines the grid-template-area of the grid.
  • gap : defines the gap between child elements. You can also specify gap-x or gap-y for horizontal and vertical gaps.
  • gap-x : defines the horizontal gap between child elements.
  • gap-y : defines the vertical gap between child elements.
  • col-x : defines the size of the column number x
  • row-x : defines the size of the row number x

template

Let’s take an example with template:(a-b|c-c).

The template syntax, is a shorthand for defining grid-template-areas. Here’s a breakdown of how it works:

  • |: The | symbol is used to indicate the separation between rows in your grid layout. It essentially tells the template to move to a new line for the next set of elements.
  • -: The - symbol is used to represent a span of multiple columns within a single row. For example, a-b means that element a takes up the first column, and element b takes up the next column in the same row.

So to get back to our example :

  • a-b: This part indicates a row in the grid where the first element ‘a’ takes up one cell and the second element ‘b’ takes up the next cell.
  • c-c: This part represents a row where the element ‘c’ spans two columns.

and Voila !

gap

Like the grid, you can use gap, gap-x, and gap-y to control the spacing between elements within the area.

col-x, row-x

You can set the size of columns and rows in the area.

For example to set the second row to 140px, use row-2:140px.

If you don’t set a size for a column or row, it’ll take up the remaining space automatically.

Same thing with columns.

For example to set the first column to 80px, use col-1:80px.

Important note

When you use col-1, it sets the size of the first column, and in this context, a column is not always an obvious element.

Imagine that in your template, each row has 3 elements. It will examine the first row with 3 distinct elements and set the size of the first column based on that.

For example, if your template is (a-a-b|c-c-c|d-e-f), col-1 will size the column containing ‘d’ because it is the first column in the first row with three distinct elements.

If, in this case, you don’t have 3 distinct elements in a row, col-1 will do nothing.

For rows, it’s a bit different.

Imagine you want to set row-1 it’s the first element that appears in only one row which will be used to set the height of that row.

So, if your template is (a-a-b|a-a-c|d-e-f) and you want to set row-1, it will set the height based on ‘b’ because it’s the first element that appears in only one row, row-2 will set the height based on ‘c’ and row-3 will refer to the row with ‘d-e-f’.

I know it’s a bit tricky, so try it yourself to fully understand how it works.