mirror of
https://github.com/servo/servo.git
synced 2025-06-28 11:03:39 +01:00
59 lines
1.3 KiB
HTML
59 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Multi-column Layout Test Reference: Balance a grid container</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
|
|
<style>
|
|
:root {
|
|
font: 16px/1.25 sans-serif;
|
|
}
|
|
.two-columns {
|
|
column-count: 2;
|
|
width: 550px;
|
|
}
|
|
.two-column-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-rows: auto;
|
|
}
|
|
.grid-col-1 {
|
|
grid-column: 1;
|
|
}
|
|
.grid-col-2 {
|
|
grid-column: 2;
|
|
}
|
|
.keep-together {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
<div class="two-columns">
|
|
<div class="two-column-grid">
|
|
<div class="grid-col-1">ID Number</div>
|
|
<div class="grid-col-2">01234567890</div>
|
|
<div class="grid-col-1">Address</div>
|
|
<div class="grid-col-2">
|
|
<div class="keep-together">
|
|
123 Fake Street<br>
|
|
London<br>
|
|
NW1 1AA<br>
|
|
UK
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="two-column-grid">
|
|
<div class="grid-col-1">Relevant Countries</div>
|
|
<div class="grid-col-2">
|
|
Ireland<br>
|
|
United Kingdom
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
Some content underneath the details.
|
|
</div>
|
|
</html>
|