W3.CSS Cells
Cell Layout
W3.CSS provides cell classes for creating simple column layouts.
Cells can automatically adjust their width and height and can be vertically aligned.
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Cell Classes
| Class | Description |
|---|---|
w3-cell |
Creates a cell |
w3-cell-row |
Creates a container for cells |
w3-cell-top |
Aligns a cell at the top |
w3-cell-middle |
Aligns a cell in the middle |
w3-cell-bottom |
Aligns a cell at the bottom |
The w3-cell Class
The w3-cell class displays elements next to each other as cells.
Cell 1
Cell 2
Example
<div class="w3-cell-row">
<div class="w3-cell w3-container">Cell 1</div>
<div class="w3-cell w3-container">Cell 2</div>
</div>
Try it Yourself »
The w3-cell-row Class
The w3-cell-row class creates a container for cells.
The container is 100% wide by default.
Cell 1
Cell 2
Example
<div class="w3-cell-row">
<div class="w3-cell w3-container">Cell 1</div>
<div class="w3-cell w3-container">Cell 2</div>
</div>
Try it Yourself »
Cells Adjust Their Width
Cells automatically adjust their width to fit their content.
Short
This cell contains more content than the first cell.
Example
<div class="w3-cell-row">
<div class="w3-cell w3-container">
<p>Short cell.</p>
</div>
<div class="w3-cell w3-container">
<p>This cell contains more content than the first cell.</p>
</div>
</div>
Try it Yourself »
Note
Flexbox can also distribute available width with the flex property.
Cells Have Equal Height
Cells in the same row automatically have equal height.
Short cell.
More content.
More content.
More content.
Example
<div class="w3-cell-row">
<div class="w3-cell w3-container">
<p>Short cell.</p>
</div>
<div class="w3-cell w3-container">
<p>More content.</p>
<p>More content.</p>
<p>More content.</p>
</div>
</div>
Try it Yourself »
Vertical Alignment
W3.CSS provides three classes for vertically aligning cells:
w3-cell-topw3-cell-middlew3-cell-bottom
Top
Middle
Bottom
Example
<div class="w3-cell-row">
<div class="w3-cell w3-container w3-cell-top">Top</div>
<div class="w3-cell w3-container w3-cell-middle">Middle</div>
<div class="w3-cell w3-container w3-cell-bottom">Bottom</div>
</div>
Try it Yourself »
Responsive Cells
The w3-mobile class makes cells responsive.
Cells are displayed side by side on medium and large screens and stacked on small screens.
Hello W3.CSS Cell.
Hello W3.CSS Cell.
Hello W3.CSS Cell.
Example
<div class="w3-cell-row">
<div class="w3-cell w3-container w3-mobile">1</div>
<div class="w3-cell w3-container w3-mobile">2</div>
<div class="w3-cell w3-container w3-mobile">3</div>
</div>
Try it Yourself »
You will learn more about responsive layouts in the next chapter.
Cells vs Rows vs Flexbox
| Layout | Best For |
|---|---|
| Cells | Simple equal-height columns with vertical alignment |
| Rows | Simple halves, thirds, and quarters |
| Flexbox | Modern one-dimensional layouts and alignment |
Cells are convenient for simple layouts that need equal height or vertical alignment.
Flexbox provides more control for most modern layouts.
What You Have Learned
w3-cell-rowcreates a container for cellsw3-cellcreates a cell- Cells automatically adjust their width
- Cells in the same row have equal height
- Cell alignment classes can align content at the top, middle, or bottom
w3-mobilestacks cells on small screens
More Examples
Explore more ways to use W3.CSS cells.
Cell Row Width
The width of a cell row can be changed with CSS.
Example
<div class="w3-cell-row" style="width:75%">
<div class="w3-cell">Cell</div>
<div class="w3-cell">Cell</div>
</div>
Mixed Cell Alignment
Example
<div class="w3-cell-row">
<div class="w3-cell w3-cell-top">Top</div>
<div class="w3-cell w3-cell-middle">Middle</div>
<div class="w3-cell w3-cell-bottom">Bottom</div>
</div>
