如何使用Flexbox和CSS Grid，实现高效布局

</header>

<ul>

</ul>

</aside>

<p></p>

</section>

<p></p>

</footer>

</div>

我们按照次序在 grid container 中定义这些区域，就像绘制它们一样。

grid-template-areas:

“header header”

“footer footer”;

当前侧边栏位于左侧，主区域内容位于右侧，如不雅须要，也可以轻松更改次序。

header{ 
    grid-area: header; 
    padding: 20px 0; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
}

HTML 构造与 Flexbox 示例中的雷同，但 CSS 与创建网格构造完全不合。

.container{ 
    max-width: 900px; 
    background-color: #fff; 
    margin: 0 auto; 
    padding: 0 60px; 
    display: grid; 
    grid-template-columns: 1fr 3fr; 
    grid-template-areas: 
        "header header" 
        "sidebar main" 
        "footer footer"; 
    grid-gap: 50px; 
}

Flexbox 异常合适放置 header 元素。根本的 header 构造须要设置 justify-content: space-between。

应用 CSS Grid 构造时，在 container 中设置 display: grid; 异常重要。此处声明 grid-template-columns，是为了确保页面的┞符体构造。这里 grid-template-column 已将侧边栏和主内容区域大年夜小设置为 1fr 和 3fr。fr 是网格的分数单位。

header{ 
    grid-area: header; 	
			 3/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　刷脸”进站，人脸识别落地火车站究竟靠不靠谱
            
            2017国庆、中秋假日叠加，构成长达八天的“超等假期”。在这弗成多得的出游良机中，记者就是“人山车海”中的一员，去到长沙感触感染了毛主席昔时傲立橘子洲头指导江>>>详细阅读


本文标题：如何使用Flexbox和CSS Grid，实现高效布局
地址：http://www.17bianji.com/lsqh/37766.html
 1/2    1