Question

在CSS网格中，我的容器填充了屏幕的宽度，但是网格模板区域却没有：是否对此进行了修复？我试图调整容器的大小，但这只会更改网格的位置。因为此系统可处理网格模板行和网格模板列，这可能是使用网格模板区域的问题吗？

body
{
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-size: 0.7vw;
	font-family: 'Roboto', sans-serif;
}

h1
{
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 1200%;
	margin: 0px;
	bottom: 0px;
}

a
{
	text-decoration: none;
	color: inherit;
}

a:hover
{
	color: #404040;
}

:root 
{
    --color-one: #cccccc; 
	--color-two: #8533ff;
	--color-three: #f2f2f2;
	--text-color: black;
}

/*Navbar*/
.navbar
{
	height: 10%;
	width: 100%;
	background-color: var(--color-one);
	font-size: 250%;
	color: var(--text-color);
	opacity: 0.9;
	
	display: grid;
	grid-template-rows: 100%;
	grid-template-columns: 2fr 3fr 3fr 3fr;
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 10;
}

.navBarItems
{
	margin-top: 15px;
}

#navBarHead
{
	margin-top: 12.5px;
	font-size: 120%;
	text-align: left;
	margin-left: 20px;
}

.tutorial
{
	display: grid;	
	width: 100%;
	height: 55%;
	grid-template-areas: 
	"a a a a"
	"b c d e"
	"b c d e"
	"b c d e"
	"b c d e";
	justify-content: center;
	background-color: var(--color-two);
}

.topHeader
{
	font-size: 250%;
	color: white;
	vertical-align: center;
	align-self: center;
	
}

.video
{
	background-color: var(--color-three);	
	font-size: 250%;
}

<html>

<head>

	<title>Code !t</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="htmlcss.css">

</head>

<body>

	<div class="navbar">
			
			<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
			<div class = "navBarItems">HTML</div>
			<div class = "navBarItems">CSS</div>
			<div class = "navBarItems">JAVA SCRIPT</div>
	</div>
	
	<div class = "tutorial">
		<div class = "topHeader" style="grid-area: a">HTML Basics</div>
		<div class = "Video" style="grid-area: b"></div>
		<!--<div class = "Video"></div>
		<div class = "Video"></div>
		<div class = "Video"></div>-->
	</div>
	
</body>

</html>

网格模板区域问题

0 个答案: