Wie kann ich ein Bootstrap-ähnliche 12 Spaltenraster mit der neuen CSS GRID-Technologie erstellen? Kann mir bitte jemand eine Demo zeigen, wie es geht? Ich bin wirklich verwirrt mit dieser neuen Technologie. Ich möchte einen einfachen 12-Spalten-Grid-ähnlichen Bootstrap mit CSS-Grid machen. Was soll ich dafür tun?Wie kann ich ein Bootstrap wie 12 Spalte (nur Gitter) Grid-System mit neuen CSS GRID Layout erstellen
Es wäre dies mag:
.wrapper {
display: grid;
}
.one {
grid-column: 1 ;
grid-row: 1;
}
.two {
grid-column: 2;
grid-row: 1 ;
}
.three {
grid-column: 3;
grid-row: 1 ;
}
.four {
grid-column: 4;
grid-row: 1;
}
.five {
grid-column: 5;
grid-row: 1;
}
.six {
grid-column: 6;
grid-row: 1;
}
.seven {
grid-column: 7;
grid-row: 1;
}
.eight {
grid-column: 8;
grid-row: 1;
}
.nine {
grid-column: 9;
grid-row: 1;
}
.ten {
grid-column: 10;
grid-row: 1;
}
.eleven {
grid-column: 11;
grid-row: 1;
}
.twelve {
grid-column: 12;
grid-row: 1;
}<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
<div class="eight">Eight</div>
<div class="nine">Nine</div>
<div class="ten">Ten</div>
<div class="eleven">Eleven</div>
<div class="twelve">Twelve</div>
</div>Beachten Sie, dass das Gitter eine "grid-Reihe" hat, so geht es nicht mit diesem speziellen Code wie Bootstrap wickeln. Ich referenzierte https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout, wenn Sie mehr Details davon sehen müssen.
Nun ist es wirklich einfach: Definieren Sie 13 vertikale Linien mit dem gleichen Abstand zueinander. Da man immer (und sein) gibt, werden nur 12 Zeilen mit einem relativen Abstand zu ihren früheren Linien zu schaffen haben) wie folgt aus:
/* actual grid code */
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr); /* This creates 12 equally width columns */
/* Note that one line (the outer left one) is always there → only 12 have to be created */
}
/* For this demo only */
html, body {
height: 100%;
width: 100%;
}
.showcase {
border: 1px solid black;
}
.r1 {grid-column: 1/2}
.r2 {grid-column: 2/3}
.r3 {grid-column: 3/4}
.r4 {grid-column: 4/5}
.r5 {grid-column: 5/6}
.r6 {grid-column: 6/7}
.r7 {grid-column: 7/8}
.r8 {grid-column: 8/9}
.r9 {grid-column: 9/10}
.r10 {grid-column: 10/ 11}
.r11 {grid-column: 11/ 12}
.r12 {grid-column: 12/ 13}<div class="wrapper" style="height: 100%; width: 100%;">
<!-- You can change the width and hight here. Bootstrap uses a max-width to make it look better on bigger screens -->
<div class="showcase r1">1</div>
<div class="showcase r2">2</div>
<div class="showcase r3">3</div>
<div class="showcase r4">4</div>
<div class="showcase r5">5</div>
<div class="showcase r6">6</div>
<div class="showcase r7">7</div>
<div class="showcase r8">8</div>
<div class="showcase r9">9</div>
<div class="showcase r10">10</div>
<div class="showcase r11">11</div>
<div class="showcase r12">12</div>
</div>Beachten Sie jedoch, dass Das CSS-Gitter ist viel leistungsfähiger als das Bootstrap-Gitter, also stellen Sie sicher, es zu seinem vollen Potenzial zu verwenden. F. e. grid-template-area ist wirklich nützlich. Wie nennt man die Spalten/Zeilen. (Und natürlich auch die Zugabe von Reihen selbst ist ziemlich mächtig)
Sie ein ziemlich guten Überblick/Tutorial finden Sie hier: https://css-tricks.com/snippets/css/complete-guide-grid/
Sie könnten ein statt Flexbox Layout.
Dafür Sie eine div erstellen, die Sie die Flexbox wollen nach innen sein:
<div class="flex-menu">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</div>
In CSS, stellen Sie den display Parameter als flex:
.flex-menu {
display: flex;
flex-direction: row;
}
nur ein HTML-Tag verschachtelt Die Hauptnummer div wird pro Spalte angezeigt.
Wenn Sie die Position der Positionen nicht explizit angeben, werden die Positionen in der Code-Reihenfolge zugewiesen. Das Flexbox-Menü sieht so aus:
Artikel 1 | Punkt 2 | Artikel 3
display:grid; können Sie Spalten und Zeilen erstellen.
Sie müssen ein Raster von 12 Spalten definieren und Klassen so viele Zeilen und so viele Spalten, so ähnlich BootSrap-Klassen können Sie Ihr Element innerhalb von 1. bis 12. Bits einer Zeile, aber im Gegensatz zu Bootstrap ermöglicht es Ihnen, auch ohne zusätzlichen Markup/inbrication Element durch Reihen zu überbrücken:
Beispiel: https://codepen.io/gc-nomade/pen/RLjdrM
.grid {
margin: 1em;
border: solid lightgray;
background: lightgray;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 2px;
counter-reset: div;
}
.grid div {
border: solid;
text-align: center;
}
.grid div:before {
counter-increment: div;
content: 'N°' counter(div);
}
.grid div[class]:after {
display: block;
text-align: center;
background: lightblue;
content: "Class applied : "attr(class);
color: crimson;
}
/* spanning cols, complete values missing */
.col-2 {
grid-column: auto/span 2;
}
.col-3 {
grid-column: auto/span 3;
}
.col-6 {
grid-column: auto/span 6;
}
.col-8 {
grid-column: auto/span 8;
}
/* spanning rows , complete values missing*/
.row-2 {
grid-row: auto/span 2;
}<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-2 row-2"></div>
<div class="col-8"></div>
<div class="col-2 row-2"></div>
<div class="col-3"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</div>Hier ist 2 nützliche Verbindung t o beginnen mit CSS-Layout Grids spielen:
wie flex-Richtung: Spalte 12 Spalten ziehen wird? Wenn Sie Ihre in Block setzen, brauchen Sie kein Reset auf dem Display für das Flex-Menü ... Zumindest die Frage verdient diese Antwort :)) –
Danke @ G-Cyr! Ich habe 'columns' anstelle von' row' verwendet. Auf diese Weise würden die Gegenstände untereinander und nicht nebeneinander angezeigt. Korrigiert! –