CSS Grid 布局入门

CSS Grid布局入门

1.普通版

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css Grid Demo</title>
<style>
.container {
    display: grid;
    grid-gap: 5px;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
}
.header {
    grid-area: h;
    background-color:blue;
}
.menu {
    grid-area: m;
   background-color:black;
}
.content {
    grid-area: c;
    background-color:red;
}
.footer {
   grid-area: f;
       background-color:blue;
}
</style>
</head>

<body>
<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>
</body>
</html>

2.升级版

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Demo</title>
<style type="text/css">
html,body{
    height:100%;
}
body {
    margin: 0px;    
}
.container{    
    height:100%;
    display:grid;
    grid-gap:0.5%;        
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 18.5% 60% 18.5%;
      grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";    
}
.header{
    grid-area:h;
    background-color:red;
}
.menu{
    grid-area:m;
    background-color:blue;
}
.content{
    grid-area:c;
    background-color:yellow;
}
.footer{
    grid-area:f;
    background-color:black;
}
</style>
</head>
<body>
<div class="container">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>
</body>
</html>

课后作业:

1.复制上述代码,预览查看效果。

2.读懂上述代码。

如果有问题：查看专家博客:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html