PHP前端开发

CSS 网格元素

百变鹏仔 4周前 (09-19) #CSS
文章标签 网格

CSS 中的网格元素有父元素和子元素。这是一个使用 6 个元素创建网格的示例。

示例

实时演示

<!DOCTYPE html><html>   <head>      <style>         .container {            display: grid;            grid-template-columns: auto auto;            padding: 20px;         }         .ele {            background-color: orange;            border: 2px solid gray;            padding: 25px;            font-size: 20px;            text-align: center;         }      </style>   </head>   <body>      <h1>Game Board</h1>      <div class = "container">         <div class = "ele">1</div>         <div class = "ele">2</div>         <div class = "ele">3</div>         <div class = "ele">4</div>         <div class = "ele">5</div>         <div class = "ele">6</div>      </div>   </body></html>