CSS grid-template-columns属性

grid-template-columns属性用于设置Grid中的列数。

示例

您可以尝试运行以下代码以实现grid-template-columns属性-

<!DOCTYPE html>

<html>

   <head>

      <style>

         .container {

            display: grid;

            background-color: blue;

            grid-template-columns: auto auto;

            padding: 20px;

            grid-gap: 20px;

         }

         .container > div {

            background-color: orange;

            border: 2px solid gray;

            padding: 35px;

            font-size: 30px;

            text-align: center;

         }

      </style>

   </head>

   <body>

      <h1>Game Board</h1>

      <div class = "container">

         <div class = "ele1">1</div>

         <div class = "ele2">2</div>

         <div class = "ele3">3</div>

         <div class = "ele4">4</div>

         <div class = "ele5">5</div>

         <div class = "ele6">6</div>

      </div>

   </body>

</html>

以上是 CSS grid-template-columns属性 的全部内容, 来源链接: utcz.com/z/321746.html

回到顶部