Heim >Web-Frontend >CSS-Tutorial >CSS-Rasterelemente

CSS-Rasterelemente

PHPz
PHPznach vorne
2023-09-14 08:25:02727Durchsuche

CSS 网格元素

Rasterelemente in CSS haben übergeordnete Elemente und untergeordnete Elemente. Hier ist ein Beispiel für die Erstellung eines Rasters mit 6 Elementen.

Beispiele

Live-Demo

<!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>

Das obige ist der detaillierte Inhalt vonCSS-Rasterelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen