Lite Tips: Tegn Din Rutenett i ASCII-i CSS Kommentarer for Rask Referanse

0
9

Si at du erklært et rutenett som dette:

body {
visning: rutenett;
grid-mal-kolonner: min-innhold 1fr;
grid-mal-rader: min-innhold auto-min-innhold;
}

Dette avhenger av innhold, for sikker, men hvor det er sannsynlig å spille ut som dette:

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

Det er veldig lett å trekke ut rask i ASCIIFlow Infinity.

Nå ønsker du å plassere elementer i at rutenett, og uten tvil den enkleste måten å gjøre det på er å angi rutenett rader/kolonner de bør start/slutt på.

/* grid-området: rad-start / kolonne-start / rad-end / kolonne slutten */

.logo {
grid-området: 1 / 1 / 2 / 2;
}

.site-header {
grid-området: 1 / 2 / 2 / 3;
}

.sidebar-nav {
grid-området: 2 / 1 / 3 / 2;
}

.hoved-innholdet {
grid-området: 2 / 2 / 3 / 3;
}

.site-footer {
grid-området: 3 / 1 / 4 / 3;
}

Det er andre måter å gjøre dette på. Du kan bruke longhand CSS-egenskaper. Du kan gi navn til områdene. Men si at du liker å gjøre det på denne måten fordi det er tydelige eller hva som helst. Det er der ASCII er nyttig! La den ligge i en CSS-kommentar og antall linjer.

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

Nå har du en visuell referanse for å plukke ut de rutenett tall fra.

Hvis du for eksempel native apps og vil få ekte fancy, det er Monodraw.