Lite Tips: Rita Ditt Rutnät i ASCII i Dina Kommentarer i CSS för Snabb Referens

0
9

Säg att du förklarade ett rutnät så här:

body {
display: nätet.
grid-template-kolumner: min-innehåll 1fr;
grid-template-rader: min-innehåll auto-min-innehåll.
}

Detta beror på innehåll, för visst, men hur är det sannolikt att spela ut så här:

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

Det är verkligen lätt att dra ut snabbt i ASCIIFlow Oändlighet.

Nu vill du att placera elementen i nätet, och utan tvekan den enklaste sättet att göra detta är att ange nätet rader/kolumner de ska börja/sluta på.

/* grid-område: rad-start – / kolumn-start – / rad-end / kolumn slut */

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

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

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

.viktigaste-innehållet {
grid-området: 2 / 2 / 3 / 3;
}

.webbplats-fotare {
grid-området: 3 / 1 / 4 / 3;
}

Det finns andra sätt att göra detta. Du kan använda longhand CSS-egenskaper. Du kan namnge områden. Men säg att du vill göra det på det här sättet, eftersom det är en kortfattad eller vad som helst. Det är där ASCII är nyttigt! Lämna det i en CSS-kommentar och antal linjer.

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

Nu har du fått en visuell referens för att plocka ut de rutnät av nummer från.

Om du vill native-appar och vill få riktigt snygga, det är Monodraw.