42 lines
896 B
HTML
42 lines
896 B
HTML
<!-- Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Grid test page</title>
|
|
<style type='text/css'>
|
|
#grid {
|
|
display: grid;
|
|
grid-template-columns: [col-1 col-start-1] 100px [col-2] 100px;
|
|
grid-template-rows: 100px 100px;
|
|
grid-template-areas: ". header"
|
|
"sidebar content";
|
|
}
|
|
#cell1 {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
#cell2 {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
#cell3 {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
#cell4 {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="grid">
|
|
<div id="cell1">cell1</div>
|
|
<div id="cell2">cell2</div>
|
|
<div id="cell3">cell3</div>
|
|
<div id="cell4">cell4</div>
|
|
</div>
|
|
</body>
|
|
</html>
|