07 - CSS GRID.pdf

07. CSS GRID Justina Balsė 09. CSS. Turinys Pavyzdžiai (mokinių darbai) Terminologija GRID parametrai 2 CSS Grid Layout CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both...

07. CSS GRID Justina Balsė 09. CSS. Turinys Pavyzdžiai (mokinių darbai) Terminologija GRID parametrai 2 CSS Grid Layout CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, 3 unlike flexbox which is largely a 1-dimensional system. Three Column Grid 4 Four Column Grid 5 Twelve Column Grid 6 Twelve Column Grid 7 Grid Terminology 8 Grid gutter 9  GRID parametrai grid-template-columns grid-column-start grid-template-rows grid-row-end grid-template-areas grid-column-end grid-template grid-row grid-auto-columns grid-column grid-auto-rows grid-area grid-auto-flow grid-row-gap 10 grid grid-column-gap grid-row-start grid-gap grid-template-columns | 1 HTML CSS.grid-container { border: 1px solid #244000; padding: 0.5em; A width: 50%; display: grid; B grid-template-columns: 100px 100px 100px; } C.box1 { background-color: #77A892; D padding: 20px; E } text-align: center; 11 F.box2 { background-color: #355948; padding: 20px; text-align: center; } grid-template-columns | 2 Fiksuotas dydis (300px) 12 grid-template-columns | 3 HTML CSS A B.grid-container { C display: grid; D grid-template-columns: 1fr 120px 50%; E } 13 F grid-template-columns | 4 Skirtingi dydžiai: fr, px, % fr - CSS Grid Layout introduces a new unit of length called fr, which is short for “fraction”. 14 grid-template-rows | 1 HTML CSS A B.grid-container { C display: grid; grid-template-columns: 1fr 1fr 1fr; D grid-template-rows: 150px 150px; E } 15 F grid-template-rows | 2 16 grid-auto-rows | 1 HTML CSS A B.grid-container { C display: grid; grid-template-columns: 1fr 1fr 1fr; D grid-auto-rows: 200px; E } 17 F grid-auto-rows | 2 18  grid-auto-rows | 3.grid-container { minmax(min, max) display: grid; grid-template-columns: 1fr 1fr 1fr; Is a functional notation grid-auto-rows: minmax(100px, auto); that defines a size range } grid-gap: 5px 20px; greater than or equal to min and less than or equal to max. If max is smaller 19 than min, then max is ignored and the function is treated as min. grid-auto-rows | 4 20  Gutter | 1.grid-container { grid-column-gap display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap grid-auto-rows: 200px; grid-gap: 5px 20px; grid-gap (row, column) } 21 Gutter | 2 22 Kiti parametrai Grid Line Grid Area 23  autofit, autofill auto-fill FILLS the row with auto-fit FITS the as many columns as it can CURRENTLY fit. So it creates implicit AVAILABLE columns into columns whenever a new the space by expanding them column can fit, because it's so that they take up any trying to FILL the row with available space. The browser as many columns as it can. does that after FILLING that The newly added columns extra space with extra 24 can and may be empty, but columns (as with auto-fill ) they will still occupy a and then collapsing the designated space in the row. empty ones. Pavyzdžiai grid-template-columns: repeat(3,1fr); grid-template-columns: repeat(auto-fill,200px); grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); Nuotraukų galerija 25 Pavyzdžiai | 2 Grid alignment Flexbox vs. GRID ***Žaidimas GIRD GARDEN*** 26 Praktika (1) Sukurti maketą, naudojant CSS GRID. 27 Praktika (2) HTML nekeičiamas Naudoti 1-os praktinės užduoties HTML dokumentą. Sukurti maketą, naudojant CSS GRID, nekeičiant elementų išdėstymo HTML dokumente. 28 Praktika (3) Sukurti tinklapio maketą, naudojant CSS GRID. 29 Praktika (4) Sukurti tinklapio maketą, naudojant CSS GRID. 30  Praktika (*5) Sukurti tinklapio maketą, naudojant CSS GRID. ***Pritaikyti keliems ekranams, naudojant 31 Media Queries. Praktika (*6) | 1 Sukurti tinklapio maketą, naudojant CSS GRID. ***Pritaikyti keliems ekranams, naudojant 32 Media Queries. Praktika (*6) | 2 Pritaikymo prie kelių ekranų pavyzdys. 33  Praktika (*7) Media Queries: 991.98px; 767.98px; 575.98px 34 Papildomi šaltiniai Don't Wait to Use Subgrid for Better Card Layouts Build a Classic Layout FAST in CSS Grid https://cssgrid-generator.netlify.app/ 35