e8-row
Updated on Sep 18, 2025 8 minutes to readA flexible row component for building responsive grid layouts with vertical and horizontal alignment options.
Overview
e8-row is used as a container for e8-col components.
It supports vertical (align-items-*) and horizontal (justify-content-*) alignment utilities to position columns within the row.
Custom CSS classes and inline styles can also be applied.
<e8-row
vertical-alignment="center"
horizontal-alignment="center"
css-class="mb-3"
>
<e8-col span="3">
<div class="p-3 bg-primary text-white">Column 1</div>
</e8-col>
<e8-col span="3">
<div class="p-3 bg-secondary text-white">Column 2</div>
</e8-col>
<e8-col span="3">
<div class="p-3 bg-success text-white">Column 3</div>
</e8-col>
</e8-row>
🔽 Show more
Column 1
Column 2
Column 3
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| css-class | Additional CSS class(es) to apply to the row. | string | '' |
| css-style | Inline styles for the row. | object | {} |
| horizontal-alignment | Sets horizontal alignment of the columns. Options: default, left, center, right. | E8TextHorizontalAlignment | 'default' |
| vertical-alignment | Sets vertical alignment of the columns. Options: default, top, center, bottom. | E8TextVerticalAlignment | 'default' |
Slots
| Slot | Description |
|---|---|
| default | Slot for row content. Usually contains one or more <e8-col> components. |