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

    • Box-l

    ...

    The box component, is literally a box for you to put some content.

    It allows you to define a max width, and if you do, its width won't depend on the content width.

    • max-width : define the max-width of the box.
    • grow : gives a 100% width to the content of the box.

    Examples:

    In this example, we didn't gave a max-width to the box, so as you can see, the box width is based on its content.

    Hello world!

    Here we have 2 box with a max-width defined.

    My parents width isn't based on my size Mine either

    In this example, we are going to see how you can use the grow attribute.

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores totam maiores omnis! Doloribus, dolores, neque praesentium.

    Hey I have a 100% width !