Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Build an asymmetric bento layout by using CSS Grid to control the page’s two-dimensional tile arrangement, then use Flexbox inside tiles whose content runs in a single row or column. Keep the HTML in a sensible reading order, stack the tiles on narrow screens, and change the grid map when the available width can support the larger composition.
Plan the content and reading order first
Decide what each tile contains before assigning it a size or position. Put the content in the HTML in the order people should read and navigate it. CSS can rearrange where a tile appears visually, but it does not change the document’s source order for assistive technology or sequential keyboard navigation.
That distinction matters in an asymmetric composition: a visually prominent tile may sit beside or above smaller ones, but the markup should still make sense when read from start to finish. Avoid relying on placement alone to communicate a relationship or sequence.
Build the overall composition with Grid
CSS Grid is designed for a coordinated arrangement across rows and columns. It lets you define tracks, place items, and span cells, making it a natural fit for the overall bento composition. Flexible tracks such as 1fr divide available space, while spans give dominant tiles more room than compact ones. See MDN’s basic concepts of grid layout.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Named grid areas make the layout’s visual map readable in CSS. Repeat an area name across adjacent cells to make it span them. Each named area must form a rectangle, and each row in grid-template-areas must contain the same number of cells. Use a period (.) for a deliberately empty cell. MDN explains these rules in its guide to grid template areas.
An illustrative responsive pattern
This example starts with one tile per row and defines a three-column arrangement at a wider breakpoint. The map is one possible composition, not a standard layout to copy unchanged. Adjust it to the content, tile minimum widths, and logical reading sequence.
<section class="bento" aria-label="Featured topics">
<article class="tile tile-featured">Featured content</article>
<article class="tile tile-secondary">Secondary content</article>
<article class="tile tile-tertiary">Tertiary content</article>
<article class="tile tile-compact">Compact content</article>
</section>.bento {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
grid-template-areas:
"featured"
"secondary"
"tertiary"
"compact";
}
.tile-featured { grid-area: featured; }
.tile-secondary { grid-area: secondary; }
.tile-tertiary { grid-area: tertiary; }
.tile-compact { grid-area: compact; }
@media (min-width: 48rem) {
.bento {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas:
"featured featured secondary"
"featured featured tertiary"
"compact compact tertiary";
}
}
.tile-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}The media query changes both the tracks and the area map instead of squeezing the mobile arrangement. The example uses 48rem as an illustrative breakpoint; choose a breakpoint that fits your content rather than treating this value as a universal rule. MDN’s common grid layouts also demonstrates redefining layouts across breakpoints.
Recommended Free Tools
Choose named areas or line spans
Use named areas when the composition benefits from a clear, human-readable map. They make it easy to see which cells belong to a tile and to revise the arrangement at a breakpoint. Explicit grid-column and grid-row spans can be more convenient when placing repeated items or generating placement programmatically. You can combine the approaches; choose the one that keeps the layout easiest to understand and maintain.
Rank #3
Use Flexbox inside a tile when content follows one axis
Grid coordinates the overall rows and columns; Flexbox is useful for arranging children along one axis inside a component. For example, a tile’s buttons, metadata, or navigation can use Flexbox while the tile itself remains a Grid item. Add wrapping where a row may not fit, as in the .tile-actions example above. MDN describes Flexbox in its flexible box layout guide.
Set tile proportions without clipping content
The aspect-ratio property expresses a preferred width-to-height ratio. It affects preferred sizing when at least one dimension is automatic, so it can help shape image-led or otherwise predictable tiles. It is not a guarantee that content will fit inside a fixed box. Avoid imposing a ratio on content-heavy tiles if their text or controls could overflow or be clipped. See MDN’s aspect-ratio reference.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check reading order and keyboard navigation
Grid placement affects visual order, not the source order used by screen readers or sequential keyboard navigation. The CSS Grid Layout specification, quoted in MDN’s accessibility guide, says, “Grid layout gives authors great powers of rearrangement over the document.” The guide also explains the limit of that power: visual rearrangement does not change non-visual reading order or keyboard traversal.
- Read the HTML in sequence and confirm it still makes sense without the visual layout.
- At each responsive layout, tab through interactive tiles and check that focus follows a sensible path.
- If the visual and keyboard sequences diverge confusingly, change the source order or simplify the visual rearrangement.
For the details, consult MDN’s guide to grid layout and accessibility.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
