Layout - Skelementor

Display

Control how elements are displayed with our display utilities.

Display Properties


`.block`	Block	`display: block;`	Full-width block element
`.inline-block`	Inline-block	`display: inline-block;`	Inline with block properties
`.flex`	Flex	`display: flex;`	Flexbox container
`.inline-flex`	Inline-flex	`display: inline-flex;`	Inline flexbox container
`.hidden`	Hidden	`display: none;`	Hide element

Examples

<!-- Display examples -->
<div class="block p-4 bg-gray-light">Block element</div>
<span class="inline-block p-2 bg-blue text-white">Inline block</span>
<div class="flex items-center gap-4">Flex container</div>
<div class="inline-flex items-center gap-2">Inline flex</div>
<div class="hidden">This is hidden</div>

Overflow

Control how content overflows its container.

Overflow Properties


`.overflow-hidden`	Hidden	`overflow: hidden;`	Hide overflowing content
`.overflow-auto`	Auto	`overflow: auto;`	Show scrollbars when needed

Examples

<!-- Overflow examples -->
<div class="w-64 h-32 overflow-hidden border border-gray">
  <p class="p-4">
    This content might overflow the container and will be hidden.
  </p>
</div>

<div class="w-64 h-32 overflow-auto border border-gray">
  <p class="p-4">This content will show scrollbars when it overflows.</p>
</div>

Object Fit

Control how images and videos fit within their containers.

Object Fit Properties


`.object-cover`	Cover	`object-fit: cover;`	Cover container, crop if needed
`.object-contain`	Contain	`object-fit: contain;`	Fit within container, no cropping

Examples

<!-- Object fit examples -->
<img src="image.jpg" class="w-64 h-32 object-cover rounded" alt="Cover image" />
<img
  src="image.jpg"
  class="w-64 h-32 object-contain border"
  alt="Contain image"
/>

Aspect Ratio

Control the aspect ratio of elements.

Aspect Ratio Properties


`.aspect-square`	1:1	`aspect-ratio: 1 / 1;`	Square aspect ratio
`.aspect-video`	16:9	`aspect-ratio: 16 / 9;`	Video aspect ratio

Examples

<!-- Aspect ratio examples -->
<div class="w-64 aspect-square bg-blue rounded"></div>
<div class="w-full aspect-video bg-gray-light rounded"></div>

Flexbox Direction

Control the direction of flex items.

Flex Direction


`.flex-row`	Row	`flex-direction: row;`	Horizontal layout (default)
`.flex-col`	Column	`flex-direction: column;`	Vertical layout

Examples

<!-- Flex direction examples -->
<div class="flex flex-row gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-green text-white">Item 2</div>
  <div class="p-4 bg-red text-white">Item 3</div>
</div>

<div class="flex flex-col gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-green text-white">Item 2</div>
  <div class="p-4 bg-red text-white">Item 3</div>
</div>

Flexbox Wrap

Control how flex items wrap.

Flex Wrap


`.flex-wrap`	Wrap	`flex-wrap: wrap;`	Allow wrapping
`.flex-nowrap`	No wrap	`flex-wrap: nowrap;`	Prevent wrapping

Examples

<!-- Flex wrap examples -->
<div class="flex flex-wrap gap-4">
  <div class="w-1-3 p-4 bg-blue text-white">Item 1</div>
  <div class="w-1-3 p-4 bg-green text-white">Item 2</div>
  <div class="w-1-3 p-4 bg-red text-white">Item 3</div>
  <div class="w-1-3 p-4 bg-yellow text-white">Item 4</div>
</div>

Justify Content

Control horizontal alignment of flex items.

Justify Content


`.justify-start`	Start	`justify-content: start;`	Align to start
`.justify-center`	Center	`justify-content: center;`	Center alignment
`.justify-end`	End	`justify-content: end;`	Align to end
`.justify-between`	Space between	`justify-content: space-between;`	Space between items

Examples

<!-- Justify content examples -->
<div class="flex justify-start gap-4 p-4 bg-gray-light">
  <div class="p-2 bg-blue text-white">Start</div>
  <div class="p-2 bg-green text-white">Items</div>
</div>

<div class="flex justify-center gap-4 p-4 bg-gray-light">
  <div class="p-2 bg-blue text-white">Centered</div>
  <div class="p-2 bg-green text-white">Items</div>
</div>

<div class="flex justify-between p-4 bg-gray-light">
  <div class="p-2 bg-blue text-white">Start</div>
  <div class="p-2 bg-green text-white">End</div>
</div>

Align Items

Control vertical alignment of flex items.

Align Items


`.items-start`	Start	`align-items: start;`	Align to start
`.items-center`	Center	`align-items: center;`	Center alignment
`.items-end`	End	`align-items: end;`	Align to end
`.items-stretch`	Stretch	`align-items: stretch;`	Stretch to fill

Examples

<!-- Align items examples -->
<div class="flex items-start gap-4 p-4 bg-gray-light h-24">
  <div class="p-2 bg-blue text-white">Start</div>
  <div class="p-2 bg-green text-white">Aligned</div>
</div>

<div class="flex items-center gap-4 p-4 bg-gray-light h-24">
  <div class="p-2 bg-blue text-white">Center</div>
  <div class="p-2 bg-green text-white">Aligned</div>
</div>

Align Self

Control individual item alignment within a flex container.

Align Self


`.self-center`	Center	`align-self: center;`	Center this item
`.self-start`	Start	`align-self: start;`	Align to start
`.self-end`	End	`align-self: end;`	Align to end

Examples

<!-- Align self examples -->
<div class="flex items-start gap-4 p-4 bg-gray-light h-24">
  <div class="p-2 bg-blue text-white">Start</div>
  <div class="p-2 bg-green text-white self-center">Self Centered</div>
  <div class="p-2 bg-red text-white">End</div>
</div>

Gap

Control spacing between flex items.

Gap Properties


`.gap-1`	4px	`gap: 4px;`	Small gap
`.gap-2`	8px	`gap: 8px;`	Small gap
`.gap-3`	12px	`gap: 12px;`	Medium gap
`.gap-4`	16px	`gap: 16px;`	Standard gap
`.gap-6`	24px	`gap: 24px;`	Large gap
`.gap-8`	32px	`gap: 32px;`	Extra large gap

Examples

<!-- Gap examples -->
<div class="flex gap-2">
  <div class="p-2 bg-blue text-white">Item 1</div>
  <div class="p-2 bg-green text-white">Item 2</div>
  <div class="p-2 bg-red text-white">Item 3</div>
</div>

<div class="flex gap-6">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-green text-white">Item 2</div>
  <div class="p-4 bg-red text-white">Item 3</div>
</div>

Common Layout Patterns

Header with Logo and Navigation

<header class="flex items-center justify-between p-6 bg-white border-b border-gray-light">
  <h1 class="text-2xl font-700">Logo</h1>
  <nav class="flex gap-6">
    <a href="#" class="text-base text-gray">
      Home
    </a>
    <a href="#" class="text-base text-gray">
      About
    </a>
    <a href="#" class="text-base text-gray">
      Contact
    </a>
  </nav>
</header>

Card Grid

Responsive Card Grid

<div class="flex flex-wrap gap-6">
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">
      <h3 class="text-xl font-600 mb-4">Card Title</h3>
      <p class="text-gray">Card content goes here.</p>
    </div>
  </div>
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">
      <h3 class="text-xl font-600 mb-4">Card Title</h3>
      <p class="text-gray">Card content goes here.</p>
    </div>
  </div>
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">
      <h3 class="text-xl font-600 mb-4">Card Title</h3>
      <p class="text-gray">Card content goes here.</p>
    </div>
  </div>
</div>

Centered Content

Centered Content Layout

<div class="flex items-center justify-center min-h-screen">
  <div class="max-w-md p-8 text-center">
    <h1 class="text-4xl font-700 mb-4">Welcome</h1>
    <p class="text-lg text-gray leading-relaxed mb-8">Your content here...</p>
    <button class="btn btn-blue">Get Started</button>
  </div>
</div>

Sidebar with Main Content

<div class="flex gap-6">
  <aside class="w-64 p-6 bg-gray-light">
    <h2 class="text-lg font-600 mb-4">Sidebar</h2>
    <nav class="flex flex-col gap-2">
      <a href="#" class="text-base text-gray">
        Link 1
      </a>
      <a href="#" class="text-base text-gray">
        Link 2
      </a>
      <a href="#" class="text-base text-gray">
        Link 3
      </a>
    </nav>
  </aside>
  <main class="flex-1 p-6">
    <h1 class="text-3xl font-700 mb-6">Main Content</h1>
    <p class="text-base leading-relaxed">Your main content goes here.</p>
  </main>
</div>

Best Practices

Flexbox Layouts

Use Semantic HTML

Always use proper HTML elements with flexbox utilities.

Consistent Gaps

Use the gap utility instead of margin for spacing between flex items.

Responsive Design

Consider how layouts will work on different screen sizes.

Accessibility

Ensure flexbox layouts work with screen readers and keyboard navigation.

Performance

Flexbox is well-optimized in modern browsers
Use gap instead of margin for better performance
Avoid deeply nested flexbox containers when possible

Spacing

Margin and padding for layout spacing

Sizing

Width and height utilities for layout

Positioning

Position utilities for advanced layouts

Components

Pre-built layout components

Getting Started

Utility Framework

Usage

CSS Reference

Troubleshooting

​Display

Display Properties

​Examples

​Overflow

Overflow Properties

​Examples

​Object Fit

Object Fit Properties

​Examples

​Aspect Ratio

Aspect Ratio Properties

​Examples

​Flexbox Direction

Flex Direction

​Examples

​Flexbox Wrap

Flex Wrap

​Examples

​Justify Content

Justify Content

​Examples

​Align Items

Align Items

​Examples

​Align Self

Align Self

​Examples

​Gap

Gap Properties

​Examples

​Common Layout Patterns

​Header Layout

Header with Logo and Navigation

​Card Grid

Responsive Card Grid

​Centered Content

Centered Content Layout

​Sidebar Layout

Sidebar with Main Content

​Best Practices

​Flexbox Layouts

​Performance

​Related Utilities

Spacing

Sizing

Positioning

Components

Display

Examples

Overflow

Examples

Object Fit

Examples

Aspect Ratio

Examples

Flexbox Direction

Examples

Flexbox Wrap

Examples

Justify Content

Examples

Align Items

Examples

Align Self

Examples

Gap

Examples

Common Layout Patterns

Header Layout

Card Grid

Centered Content

Sidebar Layout

Best Practices

Flexbox Layouts

Performance

Related Utilities