Created
February 7, 2019 19:54
-
-
Save mikeplate/abdf9857d4ca3edee22bfd83815f9230 to your computer and use it in GitHub Desktop.
CSS Grid Sample with IE11 support
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>CSS Grid</title> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.container { | |
display: -ms-grid; | |
display: grid; | |
-ms-grid-rows: 33.3% 33.3% 33.3%; | |
grid-template-rows: 33.3% 33.3% 33.3%; | |
-ms-grid-columns: 33.3% 33.3% 33.3%; | |
grid-template-columns: 33.3% 33.3% 33.3%; | |
width: 100%; | |
height: 100%; | |
} | |
.container > div { | |
font-size: 1.5em; | |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
padding: 20px; | |
overflow-y: auto; | |
} | |
.container p { | |
margin: 0px 0px 1.5em 0px; | |
} | |
.block1 { | |
-ms-grid-row: 1; | |
-ms-grid-row-span: 2; | |
-ms-grid-column: 1; | |
-ms-grid-column-span: 2; | |
grid-row-start: 1; | |
grid-row-end: 3; | |
grid-column-start: 1; | |
grid-column-end: 3; | |
background-color: #339; | |
color: #fff; | |
} | |
.block2 { | |
-ms-grid-row: 1; | |
-ms-grid-column: 3; | |
grid-row-start: 1; | |
grid-row-end: 2; | |
grid-column-start: 3; | |
grid-column-end: 4; | |
background-color: #393; | |
color: #fff; | |
} | |
.block3 { | |
-ms-grid-row: 2; | |
-ms-grid-column: 3; | |
grid-row-start: 2; | |
grid-row-end: 3; | |
grid-column-start: 3; | |
grid-column-end: 4; | |
background-color: #933; | |
color: #fff; | |
} | |
.block4 { | |
-ms-grid-row: 3; | |
-ms-grid-column: 1; | |
grid-row-start: 3; | |
grid-row-end: 4; | |
grid-column-start: 1; | |
grid-column-end: 2; | |
background-color: #399; | |
color: #fff; | |
} | |
.block5 { | |
-ms-grid-row: 3; | |
-ms-grid-column: 2; | |
-ms-grid-column-span: 2; | |
grid-row-start: 3; | |
grid-row-end: 4; | |
grid-column-start: 2; | |
grid-column-end: 4; | |
background-color: #993; | |
color: #fff; | |
} | |
.header { | |
padding: 10px; | |
margin: 10px; | |
} | |
h1 { | |
padding: 0px; | |
margin: 0px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="header"> | |
<h1>CSS Grid</h1> | |
</div> | |
<div class="container"> | |
<div class="block1"> | |
BLOCK 1 | |
</div> | |
<div class="block2"> | |
<p>BLOCK 2</p> | |
<p> | |
Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. | |
Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment | |
of content is desired in both dimensions. | |
</p> | |
<p> | |
In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout | |
structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the | |
grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, | |
while preserving a more ideal semantic structuring of their content across presentations. | |
</p> | |
<p> | |
Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, | |
uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on | |
space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to | |
control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be | |
valuable and complementary tools for CSS authors. | |
</p> | |
</div> | |
<div class="block3"> | |
BLOCK 3 | |
</div> | |
<div class="block4"> | |
BLOCK 4 | |
</div> | |
<div class="block5"> | |
BLOCK 5 | |
</div> | |
</div> | |
<script> | |
function onResize() { | |
var container = document.querySelector(".container"); | |
var rect = container.getBoundingClientRect(); | |
var height = window.innerHeight - rect.top; | |
container.style.height = height + "px"; | |
} | |
window.addEventListener("resize", onResize, false); | |
onResize(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment