Dizajn / Raspored

Generator CSS mreže (vizuelni alat za grid-template-areas)

Podesite kolone, redove i razmak, prevlačite preko ćelija da biste napravili imenovane oblasti kao što su zaglavlje, bočna traka i glavni sadržaj, a zatim kopirajte CSS sa svojstvima grid-template-columns, grid-template-rows i grid-template-areas, spreman za lepljenje.

Generator CSS mreže (vizuelni alat za grid-template-areas): Veličine traka se upisuju dok kucate, na primer 200px 1fr 1fr, a ponovljene veličine postaju repeat(). Svaka oblast postaje ime u grid-template-areas, pri čemu se za prazne ćelije koristi tačka, kao i pravilo koje elementu dodeljuje grid-area. Oblasti moraju biti pravougaonici i ne mogu da se preklapaju, kao što zahteva CSS; raspored se čuva u ovom pregledaču. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Generator za CSS gridLokalna obrada

U potpunosti radi u vašem pregledaču

Prevucite preko ćelija da biste napravili oblast; ona može da obuhvati više redova i kolona. Unesite veličine traka kao što su 1fr, 200px, auto ili minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Dodelite svakom elementu detetu klasu njegove oblasti. Ćelije prikazane kao tačka ostaju prazne.

Imenovane oblasti

Svaki string u grid-template-areas predstavlja jedan red, a svaka reč jednu ćeliju: "header header" "sidebar main" postavlja zaglavlje preko obe kolone. Element sa grid-area: main popunjava svaku ćeliju nazvanu main. Nazivi ne moraju da se podudaraju sa nazivima klasa, ali CSS je pregledniji kada su isti.

Uobičajene veličine staza

minmax(200px, 1fr) održava širinu kolone od najmanje 200 px, ali omogućava njeno širenje; auto se prilagođava sadržaju; repeat(auto-fill, minmax(12rem, 1fr)) pravi onoliko kolona koliko može da stane, što je obrazac za mreže kartica. Razmak može da bude fluidan pomoću CSS clamp generatora.

Kako se koristi

  1. Izaberite broj kolona i redova i unesite njihove veličine.
  2. Prevlačite preko ćelija da biste napravili oblasti i promenite imena.
  3. Kopirajte CSS i svakom podređenom elementu dodelite klasu njegove oblasti.

Privatnost i ograničenja

Raspored se pravi u vašem pregledaču.

Srodne alatke

CSS clamp()Senka okviraFormatiranje CSS-aFlexboxClip path

Često postavljana pitanja

Šta znači fr?

Jedan deo slobodnog prostora: 1fr 2fr daje drugoj koloni dvostruko veću širinu od prve, nakon oduzimanja fiksnih veličina i razmaka.

Zašto oblasti ne mogu da se preklapaju ili budu u obliku slova L?

grid-template-areas prihvata samo pravougaonike, pri čemu se svaka oblast imenuje jednom. Elementi koji se preklapaju mogući su u CSS mreži, ali za njih su umesto imenovanih oblasti potrebni eksplicitni brojevi linija.

Kako da napravim responzivan raspored?

Koristite generisani CSS za široki raspored, a zatim redefinišite grid-template-columns i grid-template-areas unutar media query-ja za uske ekrane.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban