我使用了`grid-template-rows: 200px 200px;`。但它并没有创建 2 行和多列

问题描述投票：0回答：1

预期输出：2行多列我得到的输出：多行和 1 列 HTML

`<body>
 <h1>Simple grid example</h1>

 <div class="container">
    <div >One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
  </div>

 </body>`

CSS

.container{ display:grid; grid-template-rows : auto auto; }

css layout responsive-design grid-layout

1个回答

0
投票

您需要使用包装器分隔行，如下所示：

<div class="container">
    <div>
        <div >One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>
    <div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
</div>
</div>

最新问题

© www.soinside.com 2019 - 2024. All rights reserved.