Lily's - Kit

Enhanced human interfaces
& user experiences

anchor article button details flex grid input label list slider table textarea

Grid custom

<grid/> in web development is used to define a flexbox container, which enables flexible layout management within a parent element. It allows child elements to dynamically adjust their size and alignment based on available space and specified rules, making it ideal for creating responsive and dynamic layouts.

<grid>
  <span>- content -</span>
  <span>- content -</span>
  <span>- content -</span>
  <span>- content -</span>
</grid>

- content -- content -- content -- content -

— parentElement PROPS

prop	description	requires
- - 2 … 12	sets maximum amount of columns	-

<grid data-props="--2">
  <span>- content -</span>
  <span>- content -</span>
  <span>- content -</span>
  <span>- content -</span>
</grid>

- content -- content -- content -- content -

<grid data-props="--12">
  <span>- content -</span>
  <span>- content -</span>
  <span>- content -</span>
  <span>- content -</span>
</grid>

- content -- content -- content -- content -- content -- content -- content -- content -- content -- content -