Задать вопрос
MaxLevs
@MaxLevs

Как решить проблему с неотображением Grid Layout?

Суть такова. Не занимался сайтосроением более полугода. Недавно появилось желание вспомнить сеё искусство. Однако появились проблемы. Решил для верстки основного макета страницы использовать Grid Layout. Сделал все, как надо, даже проверил правильность с помощью Хабра. Но вся эта конструкция работать почему-то не хочет.
Выглядит чудо вот так:
ca0812dd44b24eb39cd93729bf192367.png
Вот коды:
HTML:
<!DOCTYPE html>
<html>

<head>
	<title>Мега сайтик Сережки</title>
	<link rel="stylesheet" href="styles/main.css">
	<meta charset="utf-8">
</head>

<body>
	<div id="main">
		<header></header>
		<menu></menu>
		<section id="cont"></section>
		<section id="right"></section>
		<footer></footer>
	</div>
</body>

</html>


CSS:
*{margin:0;  padding:0;}

html,body{
	height:100%;
	background:#ccc
	}

#main{
	margin: 20px auto;
	min-height:1280;
	width:1020px;
	display:grid;
	grid-columns: 1fr 200px;
	grid-rows: 100px 10px 50px 15px 1fr 15px 30px;
	}

header,footer,section,menu{
	background:#fafafa;
	border:solid 1px #666;
	}

header{
	grid-column: 1;
	grid-column-span: 2;
    grid-row: 1;
	grid-column-align: stretch;
	grid-row-align: stretch;
	}

menu{
	grid-column: 1;
    grid-column-span: 2;
    grid-row: 3;
	}

section#cont{
	border:none;
	background:none;
	grid-column: 1;
    grid-row: 5;
	}
	
section#right{
	border:none;
	background:none;
	grid-column: 2;
    grid-row: 5;
	}

footer{
	grid-column: 1;
	grid-column-span:2;
    grid-row: 7;
	}


Может, я - слоупок? Напрягает еще и тот факт, что криво отображаются ресурсы типа "Hands On: CSS3 Grid Layout" Первоначальный дизайн не видел но такая картина все же напрягает:
1715098596c0403fb64cec4f03c5b0a8.png

И:
4320673f6e5c46f6812056c2dfd4dc6d.png
  • Вопрос задан
  • 719 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
ZloDeeV
@ZloDeeV
Верстаю в своё удовольствие
caniuse.com/#search=grid

Я думаю, что всем бы хотелось использовать это на всех браузерах, но увы
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы