Layout System

.ui.grid                      /* Grid container */
.ui.column                    /* Grid column */
.ui.row                       /* Grid row */

/* Column count classes */
.ui[class*="one column"].grid         /* 1-column grid */
.ui[class*="two column"].grid         /* 2-column grid */
.ui[class*="three column"].grid       /* 3-column grid */
.ui[class*="four column"].grid        /* 4-column grid */
.ui[class*="five column"].grid        /* 5-column grid */
.ui[class*="six column"].grid         /* 6-column grid */
.ui[class*="seven column"].grid       /* 7-column grid */
.ui[class*="eight column"].grid       /* 8-column grid */
.ui[class*="nine column"].grid        /* 9-column grid */
.ui[class*="ten column"].grid         /* 10-column grid */
.ui[class*="eleven column"].grid      /* 11-column grid */
.ui[class*="twelve column"].grid      /* 12-column grid */
.ui[class*="thirteen column"].grid    /* 13-column grid */
.ui[class*="fourteen column"].grid    /* 14-column grid */
.ui[class*="fifteen column"].grid     /* 15-column grid */
.ui[class*="sixteen column"].grid     /* 16-column grid */

/* Individual column widths */
.ui.one.wide.column           /* 1/16 width column */
.ui.two.wide.column           /* 2/16 width column */
.ui.three.wide.column         /* 3/16 width column */
.ui.four.wide.column          /* 4/16 width column */
.ui.five.wide.column          /* 5/16 width column */
.ui.six.wide.column           /* 6/16 width column */
.ui.seven.wide.column         /* 7/16 width column */
.ui.eight.wide.column         /* 8/16 width column */
.ui.nine.wide.column          /* 9/16 width column */
.ui.ten.wide.column           /* 10/16 width column */
.ui.eleven.wide.column        /* 11/16 width column */
.ui.twelve.wide.column        /* 12/16 width column */
.ui.thirteen.wide.column      /* 13/16 width column */
.ui.fourteen.wide.column      /* 14/16 width column */
.ui.fifteen.wide.column       /* 15/16 width column */
.ui.sixteen.wide.column       /* 16/16 width column */

<!-- Basic grid layout -->
<div class="ui grid">
  <div class="four wide column">Sidebar</div>
  <div class="twelve wide column">Main content</div>
</div>

<!-- Equal width columns -->
<div class="ui three column grid">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

<!-- Explicit rows -->
<div class="ui grid">
  <div class="row">
    <div class="eight wide column">First row, left</div>
    <div class="eight wide column">First row, right</div>
  </div>
  <div class="row">
    <div class="sixteen wide column">Second row, full width</div>
  </div>
</div>

/* Mobile (767px and below) */
.ui.mobile.only.grid          /* Show only on mobile */
.ui.mobile.hidden.grid        /* Hide on mobile */
.ui[class*="mobile only"].column    /* Mobile-only column */

/* Tablet (768px - 991px) */
.ui.tablet.only.grid          /* Show only on tablet */
.ui.tablet.hidden.grid        /* Hide on tablet */
.ui[class*="tablet only"].column    /* Tablet-only column */

/* Computer (992px - 1199px) */
.ui.computer.only.grid        /* Show only on computer */
.ui.computer.hidden.grid      /* Hide on computer */
.ui[class*="computer only"].column  /* Computer-only column */

/* Large screen (1200px - 1919px) */
.ui.large.screen.only.grid    /* Show only on large screens */
.ui.large.screen.hidden.grid  /* Hide on large screens */

/* Widescreen (1920px and above) */
.ui.widescreen.only.grid      /* Show only on widescreen */
.ui.widescreen.hidden.grid    /* Hide on widescreen */

/* Responsive column widths */
.ui[class*="mobile one wide"].column      /* 1-wide on mobile */
.ui[class*="tablet two wide"].column      /* 2-wide on tablet */
.ui[class*="computer three wide"].column  /* 3-wide on computer */

<!-- Responsive layout -->
<div class="ui grid">
  <div class="mobile sixteen wide tablet eight wide computer four wide column">
    Responsive sidebar
  </div>
  <div class="mobile sixteen wide tablet eight wide computer twelve wide column">
    Responsive main content
  </div>
</div>

<!-- Responsive visibility -->
<div class="ui grid">
  <div class="computer only four wide column">Desktop sidebar</div>
  <div class="mobile tablet hidden twelve wide column">Desktop main</div>
  <div class="mobile tablet only sixteen wide column">Mobile/Tablet layout</div>
</div>

.ui.container                 /* Standard responsive container */
.ui.text.container            /* Narrow container optimized for text */
.ui.fluid.container           /* Full-width container */

<!-- Standard container -->
<div class="ui container">
  <h1 class="ui header">Page Title</h1>
  <p>This content is centered and has responsive max-widths.</p>
</div>

<!-- Text container for readable line lengths -->
<div class="ui text container">
  <h1 class="ui header">Article Title</h1>
  <p>This content is optimized for reading with appropriate line lengths.</p>
</div>

<!-- Fluid container -->
<div class="ui fluid container">
  <p>This content spans the full width of its parent.</p>
</div>

.ui.segment                   /* Basic content segment */
.ui.vertical.segment          /* Vertical segment spacing */
.ui.horizontal.segment        /* Horizontal segment spacing */
.ui.padded.segment            /* Extra padding */

/* Segment variations */
.ui.raised.segment            /* Raised appearance with shadow */
.ui.stacked.segment           /* Stacked appearance */
.ui.piled.segment             /* Piled appearance */
.ui.circular.segment          /* Circular segment */

/* Attached segments */
.ui.top.attached.segment      /* Attach to top */
.ui.attached.segment          /* Attach to top and bottom */
.ui.bottom.attached.segment   /* Attach to bottom */

/* Loading and disabled states */
.ui.loading.segment           /* Loading state with dimmer */
.ui.disabled.segment          /* Disabled appearance */

<!-- Basic segments -->
<div class="ui segment">
  <h3 class="ui header">Basic Segment</h3>
  <p>This is a basic segment with standard padding and borders.</p>
</div>

<!-- Raised segment -->
<div class="ui raised segment">
  <h3 class="ui header">Raised Segment</h3>
  <p>This segment has a shadow effect to appear raised.</p>
</div>

<!-- Attached segments -->
<div class="ui top attached header">
  <h3>Attached Header</h3>
</div>
<div class="ui attached segment">
  <p>This segment is attached to the header above.</p>
</div>
<div class="ui bottom attached segment">
  <p>This segment completes the attached group.</p>
</div>

<!-- Loading segment -->
<div class="ui loading segment">
  <p>This content is being loaded...</p>
</div>

.ui.divider                   /* Standard horizontal divider */
.ui.vertical.divider          /* Vertical divider */
.ui.horizontal.divider        /* Explicit horizontal divider */

/* Divider variations */
.ui.inverted.divider          /* Inverted color divider */
.ui.fitted.divider            /* No margins divider */
.ui.hidden.divider            /* Invisible spacing divider */
.ui.section.divider           /* Section divider with more spacing */
.ui.clearing.divider          /* Clears floated content */

<!-- Basic divider -->
<div class="ui segment">
  <p>Content above divider</p>
  <div class="ui divider"></div>
  <p>Content below divider</p>
</div>

<!-- Section divider with text -->
<div class="ui horizontal divider">
  OR
</div>

<!-- Vertical divider in grid -->
<div class="ui grid">
  <div class="seven wide column">Left content</div>
  <div class="ui vertical divider">OR</div>
  <div class="seven wide column">Right content</div>
</div>

<!-- Hidden divider for spacing -->
<p>First paragraph</p>
<div class="ui hidden divider"></div>
<p>Second paragraph with extra spacing</p>

/* Mobile: 767px and below */
@media only screen and (max-width: 767px) { }

/* Tablet: 768px - 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) { }

/* Computer: 992px - 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) { }

/* Large Screen: 1200px - 1919px */
@media only screen and (min-width: 1200px) and (max-width: 1919px) { }

/* Widescreen: 1920px and above */
@media only screen and (min-width: 1920px) { }