Kleine Tip: Trek Uw Raster in ASCII in Je CSS Opmerkingen voor Snelle Referentie

0
8

Zeggen dat je uitgeroepen tot een elektriciteitsnet, zoals deze:

body {
display: grid;
grid-template-kolommen: min-inhoud 1fr;
grid-template-rijen: min-content auto min-inhoud;
}

Dit is afhankelijk van de inhoud, dat is zeker, maar hoe is het waarschijnlijk om uit te spelen is als volgt:

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

Dat is heel makkelijk te trekken, snel in ASCIIFlow Oneindigheid.

U wilt nu plaats elementen in dat raster, en misschien wel de makkelijkste manier om dat te doen is het opgeven van het raster van rijen/kolommen moeten ze beginnen/eindigen.

/* grid-omgeving: rij-start / kolom-start / rij / kolom-einde */

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

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

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

.main-content {
grid-gebied: 2 / 2 / 3 / 3;
}

.site-footer {
grid-gebied: 3 / 1 / 4 / 3;
}

Er zijn andere manieren om dit te doen. U kan gebruik maken van longhand CSS-eigenschappen. U kan de naam van de gebieden. Maar zeggen je doet het op deze manier omdat het beknopt of wat dan ook. Dat is waar de ASCII is handig! Laat het in een CSS-reactie en het nummer van de lijnen.

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

Nu heb je een visuele referentie te halen uit deze grid-nummers uit.

Als je van native apps en wil echt zin in, er is Monodraw.

SHARE
Previous articleDie CSS-Paint-API
Next articleDe CSS Verf API