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.

<div className="autofit-row autofit-padded">
	<div className="autofit-col">...</div>
	<div className="autofit-col autofit-col-expand">
		<div className="autofit-section">...</div>
	</div>
	<div className="autofit-col">...</div>
</div>

<div className="autofit-row autofit-padded">
	<div className="autofit-col autofit-col-expand">
		<div className="autofit-section">...</div>
	</div>
	<div className="autofit-col autofit-col-expand">
		<div className="autofit-section">...</div>
	</div>
	<div className="autofit-col autofit-col-expand">
		<div className="autofit-section">...</div>
	</div>
	<div className="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.

Autofit Col Expand

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

<div className="card">
	<div className="card-body">
		<div className="autofit-padded-no-gutters-x autofit-row">
			<div className="autofit-col autofit-col-expand">...</div>
			<div className="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.

<div className="card">
	<div className="card-body">
		<div
			className="autofit-float-sm-down autofit-padded-no-gutters-x autofit-row"
		>
			<div className="autofit-col autofit-col-expand">...</div>
			<div className="autofit-col">...</div>
		</div>
		<div className="autofit-float autofit-padded-no-gutters-x autofit-row">
			<div className="autofit-col autofit-col-expand">...</div>
			<div className="autofit-col">...</div>
			<div className="autofit-col">...</div>
		</div>
		<div
			className="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
		>
			<div className="autofit-col">...</div>
			<div className="autofit-col">...</div>
			<div className="autofit-col autofit-col-expand">
				<div className="autofit-section">...</div>
			</div>
			<div className="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.

<div className="card">
	<div className="card-body">
		<div
			className="autofit-float-end-sm-down autofit-padded-no-gutters-x autofit-row"
		>
			<div className="autofit-col autofit-col-expand">...</div>
			<div className="autofit-col">...</div>
		</div>
		<div
			className="autofit-float-end autofit-padded-no-gutters-x autofit-row"
		>
			<div className="autofit-col autofit-col-expand">...</div>
			<div className="autofit-col">...</div>
			<div className="autofit-col">...</div>
		</div>
		<div
			className="autofit-float-end autofit-padded-no-gutters-x autofit-row autofit-row-center"
		>
			<div className="autofit-col autofit-col-expand">
				<div
					className="autofit-float autofit-padded-no-gutters autofit-row"
				>
					<div className="autofit-col">...</div>
					<div className="autofit-col">...</div>
					<div className="autofit-col">...</div>
				</div>
			</div>
			<div className="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.

<div className="card">
	<div className="card-body">
		<div
			className="autofit-float autofit-row autofit-row-center autofit-padded-no-gutters-x"
		>
			<div className="autofit-col">
				<div className="autofit-section">...</div>
			</div>
			<div className="autofit-col">
				<div className="autofit-section">...</div>
			</div>
			<div className="autofit-col autofit-col-end">
				<div className="autofit-row autofit-padded-no-gutters">
					<div className="autofit-col autofit-col-expand">
						<div className="autofit-section">...</div>
					</div>
					<div className="autofit-col autofit-col-expand">
						<div className="autofit-section">...</div>
					</div>
				</div>
			</div>
		</div>
		<div
			className="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
		>
			<div className="autofit-col">...</div>
			<div className="autofit-col">...</div>
			<div className="autofit-col">...</div>
			<div className="autofit-col autofit-col-end">...</div>
		</div>
	</div>
</div>

Nesting Autofit Rows

<div className="card">
	<div className="card-body">
		<div className="autofit-float autofit-padded-no-gutters-x autofit-row">
			<div className="autofit-col autofit-col-expand">...</div>
			<div className="autofit-col autofit-col-end">...</div>
		</div>
		<div className="autofit-padded-no-gutters-x autofit-row">
			<div className="autofit-col">...</div>
			<div className="autofit-col autofit-col-expand">...</div>
		</div>
		<div className="autofit-padded-no-gutters-x autofit-row">
			<div className="autofit-col">...</div>
			<div className="autofit-col autofit-col-expand">
				<div className="autofit-row">
					<div className="autofit-col autofit-col-expand">...</div>
					<div className="autofit-col">...</div>
				</div>
				...
				<div
					className="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
				>
					<div className="autofit-col">...</div>
					<div className="autofit-col">...</div>
					<div className="autofit-col">...</div>
				</div>
				<div className="autofit-padded-no-gutters-x autofit-row">
					<div className="autofit-col">...</div>
					<div className="autofit-col autofit-col-expand">
						<div className="autofit-row">
							<div className="autofit-col autofit-col-expand">
								...
							</div>
							<div className="autofit-col">...</div>
						</div>
						...
						<div
							className="autofit-float autofit-padded-no-gutters-x autofit-row autofit-row-center"
						>
							<div className="autofit-col">...</div>
							<div className="autofit-col">...</div>
							<div className="autofit-col">...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>