0build.dev
Choose a layout

grid-auto-flow

Report an Issue
Class Description

grid-flow-row

Sets grid-auto-flow: row. Items flow row by row.

CSS Rules 

.grid-flow-row {
  grid-auto-flow: row;
}

Usage 

<element class="grid-flow-row" />

Responsive

Prefix .grid-flow-row utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:grid-flow-row" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="grid-flow-row:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="grid-flow-row:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before grid-flow-row::before" />

<element class="content-after grid-flow-row::after" />
 .grid-flow-row Sets grid-auto-flow: row. Items flow row by row.

grid-flow-col

Sets grid-auto-flow: column. Items flow column by column.

CSS Rules 

.grid-flow-col {
  grid-auto-flow: column;
}

Usage 

<element class="grid-flow-col" />

Responsive

Prefix .grid-flow-col utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:grid-flow-col" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="grid-flow-col:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="grid-flow-col:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before grid-flow-col::before" />

<element class="content-after grid-flow-col::after" />
 .grid-flow-col Sets grid-auto-flow: column. Items flow column by column.

grid-flow-dense

Sets grid-auto-flow: dense. Fills gaps aggressively, may reorder items.

CSS Rules 

.grid-flow-dense {
  grid-auto-flow: dense;
}

Usage 

<element class="grid-flow-dense" />

Responsive

Prefix .grid-flow-dense utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:grid-flow-dense" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="grid-flow-dense:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="grid-flow-dense:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before grid-flow-dense::before" />

<element class="content-after grid-flow-dense::after" />
 .grid-flow-dense Sets grid-auto-flow: dense. Fills gaps aggressively, may reorder items.

grid-flow-row-dense

Sets grid auto-flow to row dense, filling in holes in the grid as elements appear.

CSS Rules 

.grid-flow-row-dense {
  grid-auto-flow: row dense;
}

Usage 

<element class="grid-flow-row-dense" />

Responsive

Prefix .grid-flow-row-dense utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:grid-flow-row-dense" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="grid-flow-row-dense:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="grid-flow-row-dense:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before grid-flow-row-dense::before" />

<element class="content-after grid-flow-row-dense::after" />
 .grid-flow-row-dense Sets grid auto-flow to row dense, filling in holes in the grid as elements appear.

grid-flow-col-dense

Sets grid auto-flow to column dense, filling in holes in the grid as elements appear.

CSS Rules 

.grid-flow-col-dense {
  grid-auto-flow: column dense;
}

Usage 

<element class="grid-flow-col-dense" />

Responsive

Prefix .grid-flow-col-dense utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:grid-flow-col-dense" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="grid-flow-col-dense:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="grid-flow-col-dense:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before grid-flow-col-dense::before" />

<element class="content-after grid-flow-col-dense::after" />
 .grid-flow-col-dense Sets grid auto-flow to column dense, filling in holes in the grid as elements appear.