时间戳

首页 > 解决方案 > 如何正确设置网格模板区域？

css-grid - 如何正确设置网格模板区域？

问题描述

谁能向我解释为什么第三行“内容”没有完全显示？我是使用网格模板区域的新手，无法弄清楚为什么内容行没有设置为最大宽度并像其他行一样完全显示在屏幕上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Exercise 1</title>
    <meta content="width=device-width", initial-scale=1, maximum-scale=1
    name="viewport"/>
    
    <style>

    body{
        background-color: #444;
    }
    .container {
        display: grid;
        width: 90%;
        grid-template-columns: 300px 300px 300px;
        grid-template-rows: 100px 350px 100px 50px;
        grid-template-areas: 
        "hd hd hd hd"
        "feat feat feat feat"
        "con con con con"
        "ft ft ft ft";
        border: solid 2px rgb(247,182, 97);
    }
    .box {
        border: solid 1px red;
        background: #f8fa90;
    
    }
    .header{grid-area: hd;}
    .feature{grid-area: feat;}
    .content{grid-area: con; width: 100%;}
    .footer{grid-area: ft;}

    </style>

</head>
<body>
    <div class="container">
        <div class="header box">Header</div>
        <div class="feature box">Feature Content</div>
        <div class="Content box">Content</div>
        <div class="footer box">footer</div>
    </div>



</body>

</html>

https://jsfiddle.net/2bw7Luzg/

标签： css-grid

解决方案

推荐阅读