Heim > Artikel > Web-Frontend > CSS-Rasterelemente

CSS-Rasterelemente

PHPznach vorne: 2023-09-14 08:25:02711Durchsuche

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!

css

Stellungnahme：

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

Vorheriger Artikel：Wie kann ich CSS an eine bestimmte Zoomstufe anpassen?Nächster Artikel：Wie kann ich CSS an eine bestimmte Zoomstufe anpassen?

In Verbindung stehende Artikel

Mehr sehen