LayoutCSS Docs Showcase
  • Showcase

    • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher

    • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index

    • Area-l

    ...

    The Area component allows you to create a custom template area.

    You can define the position of each child element using the template attribute.

    This is highly useful for creating complex grid elements on your page, and it can also be used to structure the overall layout of your page, as demonstrated in our YouTube showcase.

    • template : defines the position of the child elements in each row.
    • gap : defines the gap between child elements. You can also specify gap-x or gap-y for horizontal and vertical gaps, respectively.

    Examples:

    In this example, we will create an area containing 6 elements. Thanks to the template attribute, we will define the position of each element.

    In this example, we will see how to use the gaps attributes.