Kleiner Tipp: Zeichnen Sie Ihre Raster im ASCII in Ihrem CSS-Kommentare für Schnelle Referenz

0
10

Sagen Sie, dass Sie erklärt, ein Netz wie diese:

body {
display: grid;
grid-template-columns: min-Inhalt 1fr;
grid-template-rows: min-Inhalt auto-min-Inhalt;
}

Dies hängt davon ab, content, sicher, aber wie ist es wahrscheinlich zu spielen ist wie diese:

+—+————-+
| | |
| | |
+—————–+
| | |
| | |
| | |
| | |
| | |
| | |
+—————–+
| | |
+—+————-+

Das ist wirklich leicht zu ziehen, schnell in ASCIIFlow Unendlichkeit.

Sie möchten nun platzieren Sie Elemente im raster, und wohl der einfachste Weg das zu tun ist, geben Sie die grid Zeilen/Spalten sollten Sie start/Ende an.

/* grid-Bereich: row-start / Spalte-start / Zeilen-Ende / Spalte Ende */

.logo {
grid-Bereich: 1 / 1 / 2 / 2;
}

.site-header {
grid-Bereich: 1 / 2 / 2 / 3;
}

.sidebar-nav – {
grid-Bereich: 2 / 1 / 3 / 2;
}

.Hauptseite-Inhalt {
grid-Bereich: 2 / 2 / 3 / 3;
}

.Website-footer {
grid-Bereich: 3 / 1 / 4 / 3;
}

Es gibt andere Wege, dies zu tun. Könnten Sie longhand CSS-Eigenschaften. Sie könnte den Namen der Bereiche. Aber sagen Sie, wie es zu tun auf diese Weise, weil es prägnante oder was auch immer. Das ist, wo der ASCII ist nützlich! Lassen Sie es in ein CSS-Kommentar und der Anzahl der Linien.

/*
1 2 3
1 +—+————-+
| | |
| | |
2 +—————–+
| | |
| | |
| | |
| | |
| | |
| | |
3 +—————–+
| | |
4 +—+————-+
*/

Jetzt haben Sie eine visuelle Referenz zu Holen, die diese grid-Nummern aus.

Wenn Sie wie native apps und möchte echte Lust, es ist Monodraw.

SHARE
Previous articleThe CSS Paint API
Next articleDie CSS-Paint-API