Angenommen, Sie haben ein Raster wie dieses deklariert
body {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content auto min-content;
}Das hängt natürlich vom Inhalt ab, aber so wird es wahrscheinlich aussehen
+---+-------------+
| | |
| | |
+-----------------+
| | |
| | |
| | |
| | |
| | |
| | |
+-----------------+
| | |
+---+-------------+
Das ist wirklich einfach, schnell in ASCIIFlow Infinity zu zeichnen.
Jetzt möchten Sie Elemente in diesem Raster platzieren, und wohl der einfachste Weg, dies zu tun, ist die Angabe der Zeilen/Spalten des Rasters, an denen sie beginnen/enden sollen.
/* grid-area: row-start / column-start / row-end / column end */
.logo {
grid-area: 1 / 1 / 2 / 2;
}
.site-header {
grid-area: 1 / 2 / 2 / 3;
}
.sidebar-nav {
grid-area: 2 / 1 / 3 / 2;
}
.main-content {
grid-area: 2 / 2 / 3 / 3;
}
.site-footer {
grid-area: 3 / 1 / 4 / 3;
}Es gibt noch andere Möglichkeiten, dies zu tun. Sie könnten langformige CSS-Eigenschaften verwenden. Sie könnten die Bereiche benennen. Aber angenommen, Sie machen es gerne so, weil es prägnant ist oder was auch immer. Hier ist die Nützlichkeit von ASCII! Lassen Sie es in einem CSS-Kommentar und nummerieren Sie die Zeilen.
/*
1 2 3
1 +---+-------------+
| | |
| | |
2 +-----------------+
| | |
| | |
| | |
| | |
| | |
| | |
3 +-----------------+
| | |
4 +---+-------------+
*/Jetzt haben Sie eine visuelle Referenz, um diese Rasterzahlen auszuwählen.
Wenn Sie native Apps mögen und es wirklich schick mögen, gibt es Monodraw.
Das erinnert mich an das verrückteste PostCSS-Plugin, das ich je gesehen habe: https://github.com/sylvainpolletvillard/postcss-grid-kiss/blob/master/README.md
Ich bevorzuge Grid Template Areas aus genau diesem Grund, sie dokumentieren sich selbst, aber ein guter Beitrag.
Chris, danke für den Artikel.
@kyle danke, dass Sie mich darauf aufmerksam gemacht haben. das ist nicht verrückt, es ist brillant.
Ha. Gestanden. Ich wollte nicht andeuten, dass verrückt nicht auch brillant ist.
Kommentare sollten wirklich erklären, warum, anstatt was. Wenn Sie eine visuelle Referenz benötigen, warum nicht direkt auf ein Bild in einem Repository verlinken?
Kommentare können leicht veraltet sein, und der Code sollte lesbar genug sein, um die Absicht zu erklären. Wenn das nicht der Fall ist, sollten Sie Ihren Code refaktorisieren, bis er es ist.