Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Autofit

  • Row
  • Spacing
  • Row Vertical Alignment
  • Float
  • Float End
  • Float with Autofit Col End
  • Nesting Autofit Rows

Row

Make content expand to fill remaining space or create equally spaced content with .autofit-row, .autofit-col, .autofit-col-shrink, and .autofit-col-expand.

Warning `.autofit-row`, `.autofit-col`, `.autofit-col-shrink`, and `.autofit-col-expand` shouldn't be used for laying out site pages, rather it's most useful for small chunks of content inside other components (e.g. cards or list-groups).
Warning Direct descendants of `.autofit-col` are `flex-direction: column;` (IE 10-11 workaround because they don't respect min/max width or min/max height in flex items) become block level elements by default, see https://www.w3.org/TR/css-flexbox-1/#flex-items. If you want to display content inside `.autofit-col` using `floats`, `inline`, or `inline-block`, wrap the content with `.autofit-section`.
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

  • Dropdown Header
  • Action 1
  • Action 2
  • Action 3
  • Action 4
  • Action 5
  • Action 6
  • Action 7
  • Action 8
Copied!
Code Sample (expand to see it)
<div class="autofit-row autofit-padded">
	<div class="autofit-col">...</div>
	<div class="autofit-col autofit-col-expand">
		<div class="autofit-section">...</div>
	</div>
	<div class="autofit-col">...</div>
</div>
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Approved Pending Rejected
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Approved Pending Rejected
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Approved Pending Rejected
  • Dropdown Header
  • Action 1
  • Action 2
  • Action 3
  • Action 4
  • Action 5
  • Action 6
  • Action 7
  • Action 8
Copied!
Code Sample (expand to see it)
<div class="autofit-row autofit-padded">
	<div class="autofit-col autofit-col-expand">
		<div class="autofit-section">...</div>
	</div>
	<div class="autofit-col autofit-col-expand">
		<div class="autofit-section">...</div>
	</div>
	<div class="autofit-col autofit-col-expand">
		<div class="autofit-section">...</div>
	</div>
	<div class="autofit-col">...</div>
</div>

Autofit Col Shrink

The modifier autofit-col-shrink makes the column only as wide as its content and will grow to fill the remaining space depending on the length of the content. This should be used with variable width content such as title text with adjoining buttons.

Collection

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Autofit Col Expand

The modifier autofit-col-expand makes the column fill the remaining space.

Collection

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Sept 25 - 3 Views

Copied!
Code Sample (expand to see it)
<div class="card">
	<div class="card-body">
		<div class="autofit-padded-no-gutters-x autofit-row">
			<div class="autofit-col autofit-col-expand">...</div>
			<div class="autofit-col">...</div>
		</div>
	</div>
</div>

Spacing

The autofit-padded class should be added to autofit-row to give padding to all autofit-cols that are direct children of autofit-row.

The autofit-padded-no-gutters-x class gives padding to all autofit-cols that are direct children of autofit-row. It has negative margins on the left and right to offset the padding (similar to Bootstrap's row class).

The autofit-padded-no-gutters-y class gives padding to all autofit-cols that are direct children of autofit-row. It has negative margins on the top and bottom to offset the padding (Generally used if nesting .autofit-row).

The autofit-padded-no-gutters class gives padding to all autofit-cols that are direct children of autofit-row. It has negative margins on the top, right, bottom, and left to offset the padding (Generally used if nesting .autofit-row).

Row Vertical Alignment

Autofit Row vertically aligns to the top by default.

The autofit-row-center class vertically aligns items in autofit-row to the middle.

The autofit-row-end class vertically aligns items in autofit-row to the bottom.

Float

The component autofit-float or .autofit-float-{sm|md}-down simulates the behavior of floated elements in .autofit-row. Items that break to a new line will be aligned to the left.

This pattern provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWord

Copied!
Code Sample (expand to see it)
<div class="card">
	<div class="card-body">
		<div
			class="autofit-float-sm-down autofit-padded-no-gutters-x autofit-row"
		>
			<div class="autofit-col autofit-col-expand">...</div>
			<div class="autofit-col">...</div>
		</div>
		<div class="autofit-float autofit-padded-no-gutters-x autofit-row">
			<div class="autofit-col autofit-col-expand">...</div>
			<div class="autofit-col">...</div>
			<div class="autofit-col">...</div>
		</div>
		<div
			class="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
		>
			<div class="autofit-col">...</div>
			<div class="autofit-col">...</div>
			<div class="autofit-col autofit-col-expand">
				<div class="autofit-section">...</div>
			</div>
			<div class="autofit-col">...</div>
		</div>
	</div>
</div>

Float End

Mimic "right floated" elements.

The component .autofit-float-end or .autofit-float-end-{sm|md}-down simulates the behavior of "right floated" elements in .autofit-row. Items that break to a new line will be aligned right.

Aligning items to the left will require nesting autofit-float autofit-row inside an autofit-col autofit-col-expand with the use of helper classes.

autofit-float-end uses justify-content: flex-end; to force right alignment. Any column that doesn't expand the full width of autofit-row will be aligned right when it breaks to new line. Aligning items to the left will require nesting autofit-float autofit-row inside an autofit-col autofit-col-expand with the use of helper classes.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWord

Copied!
Code Sample (expand to see it)
<div class="card">
	<div class="card-body">
		<div
			class="autofit-float-end-sm-down autofit-padded-no-gutters-x autofit-row"
		>
			<div class="autofit-col autofit-col-expand">...</div>
			<div class="autofit-col">...</div>
		</div>
		<div class="autofit-float-end autofit-padded-no-gutters-x autofit-row">
			<div class="autofit-col autofit-col-expand">...</div>
			<div class="autofit-col">...</div>
			<div class="autofit-col">...</div>
		</div>
		<div
			class="autofit-float-end autofit-padded-no-gutters-x autofit-row autofit-row-center"
		>
			<div class="autofit-col autofit-col-expand">
				<div
					class="autofit-float autofit-padded-no-gutters autofit-row"
				>
					<div class="autofit-col">...</div>
					<div class="autofit-col">...</div>
					<div class="autofit-col">...</div>
				</div>
			</div>
			<div class="autofit-col">...</div>
		</div>
	</div>
</div>

Float with Autofit Col End

Another way to mimic "right floated" elements without using autofit-float-end and autofit-col-expand. This pattern can duplicate floated layouts without the need for a clearfix.

Copied!
Code Sample (expand to see it)
<div class="card">
	<div class="card-body">
		<div
			class="autofit-float autofit-row autofit-row-center autofit-padded-no-gutters-x"
		>
			<div class="autofit-col">
				<div class="autofit-section">...</div>
			</div>
			<div class="autofit-col">
				<div class="autofit-section">...</div>
			</div>
			<div class="autofit-col autofit-col-end">
				<div class="autofit-row autofit-padded-no-gutters">
					<div class="autofit-col autofit-col-expand">
						<div class="autofit-section">...</div>
					</div>
					<div class="autofit-col autofit-col-expand">
						<div class="autofit-section">...</div>
					</div>
				</div>
			</div>
		</div>
		<div
			class="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
		>
			<div class="autofit-col">...</div>
			<div class="autofit-col">...</div>
			<div class="autofit-col">...</div>
			<div class="autofit-col autofit-col-end">...</div>
		</div>
	</div>
</div>

Nesting Autofit Rows

COMMENTS

LC
DA
David Aragones Otero
3 Hours Ago
  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin

Percolator beans french press extraction seasonal grinder plunger pot caramelization. Single origin, dark grinder cultivar aftertaste iced skinny cappuccino irish barista aftertaste fair trade.Sweet, carajillo decaffeinated, french press crema froth and organic a fair trade. In est cream brewed bar roast filter americano turkish.

LC
Laura Garcia Castano
2 Hours Ago
  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin

Percolator beans french press extraction seasonal grinder plunger pot caramelization. Single origin, dark grinder cultivar aftertaste iced skinny cappuccino irish barista aftertaste fair trade.Sweet, carajillo decaffeinated, french press crema froth and organic a fair trade. In est cream brewed bar roast filter americano turkish.

Copied!
Code Sample (expand to see it)
<div class="card">
	<div class="card-body">
		<div class="autofit-float autofit-padded-no-gutters-x autofit-row">
			<div class="autofit-col autofit-col-expand">...</div>
			<div class="autofit-col autofit-col-end">...</div>
		</div>
		<div class="autofit-padded-no-gutters-x autofit-row">
			<div class="autofit-col">...</div>
			<div class="autofit-col autofit-col-expand">...</div>
		</div>
		<div class="autofit-padded-no-gutters-x autofit-row">
			<div class="autofit-col">...</div>
			<div class="autofit-col autofit-col-expand">
				<div class="autofit-row">
					<div class="autofit-col autofit-col-expand">...</div>
					<div class="autofit-col">...</div>
				</div>
				...
				<div
					class="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
				>
					<div class="autofit-col">...</div>
					<div class="autofit-col">...</div>
					<div class="autofit-col">...</div>
				</div>
				<div class="autofit-padded-no-gutters-x autofit-row">
					<div class="autofit-col">...</div>
					<div class="autofit-col autofit-col-expand">
						<div class="autofit-row">
							<div class="autofit-col autofit-col-expand">
								...
							</div>
							<div class="autofit-col">...</div>
						</div>
						...
						<div
							class="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
						>
							<div class="autofit-col">...</div>
							<div class="autofit-col">...</div>
							<div class="autofit-col">...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

How can this be improved? Create an issue!