Is there a way to use both or either display: grid/-ms-grid into one style sheet or do I have to use an HTML hack or JavaScript to query what type of browser a page is being viewed with grid layout?
Example:
The following styling doesn't seem to work
.container {
display: grid -ms-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(150px, 50px);
grid-gap: 1vw;
-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);
-ms-grid-gap: 1vw;
}
This is what I used for IE:
I added an @supports() for all current browser support. If you use @supports() pass in a new grid property such as @supports(grid-area: auto) to be sure a modern browser will pick it up. Do not use @suppports(display: grid) because IE will recognize display:grid and will then use the modern grid properties that it does not have. I had to use a 1px margin to mimic the grid-gap in IE though
* {
box-sizing: border-box;
}
.item-bg {
background-color: rgb(92, 182, 205);
border-radius: 6px;
margin: 1px;
}
.container {
display: -ms-grid;
width: 800px;
height: 600px;
-ms-grid-columns: 200px 1fr 1fr;
-ms-grid-rows: 80px 1fr 1fr 100px;
}
.header {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-column: 1/4;
}
.sidebar {
-ms-grid-row: 2;
-ms-grid-row-span: 2;
grid-row: 2/4;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1/2;
}
.content-1 {
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2/4;
}
.content-2 {
-ms-grid-row: 3;
-ms-grid-row-span: 1;
grid-row: 3/4;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
}
.content-3 {
-ms-grid-row: 3;
-ms-grid-row-span: 1;
grid-row: 3/4;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 3/4;
}
.footer {
-ms-grid-row: 4;
-ms-grid-row-span: 1;
grid-row: 4/5;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-column: 1/4;
}
@supports(grid-area: auto){
.item-bg {
background-color: indianred;
border-radius: 6px;
margin: 0;
}
.container {
display: grid;
width: 750px;
height: 600px;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 1fr 100px;
grid-gap: 2px;
}
.header {
grid-row: 1/2;
grid-column: 1/4;
}
.sidebar {
grid-row: 2/4;
grid-column: 1/2;
}
.content-1 {
grid-row: 2/3;
grid-column: 2/4;
}
.content-2 {
grid-row: 3/4;
grid-column: 2/3;
}
.content-3 {
grid-row: 3/4;
grid-column: 3/4;
}
.footer {
grid-row: 4/5;
grid-column: 1/4;
}
}
The html is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Layout</title>
<link rel="stylesheet" href="basiclayoutie.css" type="text/css">
</head>
<body>
<div class="container">
<div class="header item-bg">header</div>
<div class="sidebar item-bg">sidebar</div>
<div class="content-1 item-bg">Content-1</div>
<div class="content-2 item-bg">Content-2</div>
<div class="content-3 item-bg">Content-3</div>
<div class="footer item-bg">Footer</div>
</div>
</body>
</html>