Add layout and text coverage for display:table grid items whose anonymous wrappers are sized and aligned by grid layout. Cover partial grid areas, percentage table widths and margins, auto margins, oversized alignment, stretched wrappers, intrinsic tracks, distributed track spacing, percentage min/max widths, border-box constraints, and intrinsic max-width constraints.
24 lines
389 B
HTML
24 lines
389 B
HTML
<!DOCTYPE html>
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 100px;
|
|
justify-items: stretch;
|
|
width: 100px;
|
|
}
|
|
|
|
.table {
|
|
display: table;
|
|
}
|
|
|
|
.cell {
|
|
display: table-cell;
|
|
}
|
|
|
|
.content {
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
</style>
|
|
<div class="grid"><div class="table"><div class="cell"><span class="content"></span></div></div></div>
|