Question

我正在尝试为正在设计的网页创建模板，并希望采用以下格式：

Requested Format

我相信我已经正确设置了网格模板区域，但是在浏览器中查看html文件（也可以在上图中看到），即使某些数字位于同一列的网格中（但行不同）（它们彼此不对齐）（即5和6被一个空白以及8和9隔开）。

我做错了什么吗？还是缺少一段代码来确保网格区域彼此对齐？我尝试使用grid-column-start / end和grid-row-start / end命令将项目手动放置在网格中，但是我仍然遇到相同的问题。

body{
	font-family: 'Titillium Web', sans-serif;
	padding:0;
	margin:0;
}

.wrapper{
	display:grid;
	grid-template-columns: repeat(autofit,6,1fr);
	grid-auto-rows:minmax(100px,auto);
	grid-template-areas:
	"top-bar"
	"second-bar"
	"navmenu"
	"third-bar"
	"last-bar";
}

.top-bar{
	grid-area: top-bar;
	display:grid;
	grid-template-areas:
	". links links . search-bar .";
}

.links{
	grid-area: links;
}

.search-bar{
	grid-area: search-bar;
}

.second-bar{
	grid-area: second-bar;
	display:grid;
	grid-template-areas:
	". logo logo title title .";
}

.logo{
	grid-area:logo;
}

.title{
	grid-area:title;
}

.navmenu{
	grid-area: navmenu;
	display:grid;
	grid-template-areas:
	". nav-bar nav-bar nav-bar nav-bar ."
}

.nav-bar{
	grid-area:nav-bar;
}

.third-bar{
	grid-area: third-bar;
	display:grid;
	grid-template-areas:
	". images images images images ."
	". quick-links what-we-do what-we-do what-we-do ."
}

.images{
	grid-area:images;
}

.quick-links{
	grid-area:quick-links;
}

.what-we-do{
	grid-area:what-we-do;
}

.last-bar{
	grid-area: last-bar;
	display:grid;
	grid-template-areas:
	". . footer footer footer ."
}

.footer{
	grid-area:footer;
}

<DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="testpracticecss.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>

<div class="wrapper">

<div class="top-bar">
	<div class = "links">1</div>
	<div class = "search-bar">2</div>
</div>

<div class="second-bar">
	<div class="logo">3</div>
	<div class="title">4</div>
</div>

<div class="navmenu">
		<div class="nav-bar">5</div>
</div>

<div class = "third-bar">
	<div class="images">6</div>
	<div class="quick-links">7</div>
	<div class="what-we-do">8</div>
</div>

<div class = "last-bar">
	<div class="footer">9</div>
</div>

</div>
</body>

<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function() {
        window.location = document.getElementById('select1').value + document.getElementById('txtSearch').value;
        return false;
    }
</script>

使用网格模板区域时网格列无法对齐属性？

0 个答案: