Tworzenie klasycznego layoutu webowego z użyciem CSS Grid (film ~9 minut)
W najnowszym filmie na kanale Mozilla Developer, autorzy przedstawiają szybki sposób na rozpoczęcie pracy z siatkami CSS. Choć specyfikacja może wydawać się przytłaczająca i skomplikowana, można stworzyć interesujące układy przy niewielkiej ilości kodu. Na początek autor dodaje polecenie 'display: grid' do body, co, jak zauważa, nie powoduje zbyt wielu zmian na pierwszy rzut oka. Domyślna siatka przypomina standardowy przepływ bloków, co sprawia, że można ją bezpiecznie stosować bez oczekiwania na jakiekolwiek natychmiastowe zmiany w układzie.
Kolejnym krokiem jest dodanie przestrzeni pomiędzy elementami siatki, co okazuje się prostsze, gdy używa się właściwości 'grid-gap'. Poprzez ustawienie grid gap na 1em, autor zauważa, że wszystkie bloki oddzielają się od siebie o tę wartość. Używając narzędzia inspekcji w Firefoxie, można również wizualizować siatkę – widać oznaczenia linie oraz oznaczenia stref. Autor opisuje, jak siatka generuje automatycznie układ, nawet jeśli nie zostały wcześniej zdefiniowane konkretne rozmiary.
Następnie, autor przystępuje do definiowania konkretnych wierszy układu przy pomocy 'grid template rows'. Dzięki temu może on ustawić różne wymiary dla nagłówka, nawigacji, treści i stopki, co przyczynia się do utworzenia bardziej złożonego układu. Ustawiając minimalną wysokość na 100vh, autor dodaje przestrzeń dla głównej sekcji, co sprawia, że układ działa lepiej na urządzeniach mobilnych.
W dalszej części filmu, Mozilla Developer prezentuje, jak zrealizować bardziej zaawansowany układ za pomocą zapytań medialnych, co pozwala dostosować layoutu do różnych szerokości ekranów. Z kolei przez ustawienie 'grid-template-columns' można łatwo przejść na widok desktopowy z sidebar i główną treścią. Autor zwraca uwagę na fakt, iż siatka pozwala na mieszanie jednostek stałych z elastycznymi, co jest dużą zaletą tej metody. Również trzy wiersze zostały zdefiniowane, co umożliwia efektywne zarządzanie przestrzenią.
Na końcu, autorzy mówią o przydatności nazwanych obszarów w siatkach. Przez przypisanie nazw do sekcji takie jak nagłówek, nawigacja i treść, można łatwo kontrolować układ. Autor wprowadza także pojęcie obszarów siatki, które można wykorzystać do graficznego przedstawienia układu. Przykład zastosowania „ASCII art” do wizualizacji layoutu pokazuje, jak prosto można stworzyć responsywny układ, który jest łatwy w modyfikacjach. Obecna liczba wyświetleń filmiku wynosi 55386, a liczba polubień to 2328, co świadczy o pozytywnym odbiorze tej prezentacji przez społeczność na czas pisania tego artykułu.
Toggle timeline summary
-
Wprowadzenie do siatek CSS i punkt wyjścia.
-
Przegląd możliwości siatek CSS.
-
Dodanie wyświetlania siatki do ciała, aby stworzyć układy.
-
Wyjaśnienie koncepcji przerwy w siatce dla spójnego odstępu.
-
Użycie inspektora siatki w Firefoxie do wizualizacji układu siatki.
-
Zrozumienie układów implikowanych generowanych automatycznie.
-
Ustawienie wierszy szablonu siatki, aby kontrolować rozmiary układu.
-
Dostosowywanie minimalnej wysokości dla obszarów siatki.
-
Tworzenie bardziej złożonych układów z zapytaniami mediów.
-
Mieszanie jednostek stałych i elastycznych dla niezawodnych układów siatki.
-
Użycie rozciągania kolumn siatki do kontrolowania szerokości elementów.
-
Demonstracja responsywnego zachowania układu siatki.
-
Przypisanie obszarów siatki do nagłówka i nawigacji.
-
Wprowadzenie obszarów szablonów siatki do definiowania układu.
-
Dostosowywanie struktury układu w zapytaniach mediów.
-
Ostatnie przemyślenia na temat rozpoczęcia pracy z układem siatki.
Transcription
I want to show you a quick way to get started with CSS grids. I know the spec can be daunting, there's a lot that it can do, but we can start to do some fairly interesting layouts with just very little code. So I'm going to start here by just adding display grid to the body, and you can see that nothing really changes here. The default grid is very much like the default block flow. We can put it in there pretty safely without expecting much to happen. Now one of the cool things about grid is that we can add gutters in a more consistent way, so I'm going to do that. I'm going to add, it's called grid gap of 1em, and all of my block elements will jump apart by that much, so the grid gap goes between each of the grid areas. I'm going to inspect this in Firefox nightly here, and I've opened the grid inspector here in Firefox, and you can see here the body now has this little tag next to it that says grid, and I'm going to click on that, and that's going to show us the grid visually here in the main window, and you can see it's added lines around each area, it's added this shading over the gutters, and we have these line numbers. So the first line is 1, and then the second line is 2, 3, 4, 5, so we've automatically got five grid row lines down the page, and just 1 and 2 across. There's also a negative 1 indexed going backwards, so that's just happening automatically. I'm going to turn that off quick. So what we have there is the implicit grid that's generated automatically when we create a grid and we haven't defined it yet. What I'm going to do now is add some grid template rows, so rows go down the page, and I'm just going to give some sizing to these things. I'm going to say that the first one is auto-sized, that's the header, then the nav is also going to be auto-sized, and then the main content is going to be one fraction, which means it can take up as much space as it needs to in the layout, however much space is remaining. And then the footer, again, I'm going to set to auto. Now that didn't change anything yet because there's no extra space there for the main area to take up, so I'm just going to add some extra space with a min height of 100 VH, that's viewport height, so it's going to be at least the height of the viewport. And you can see that because of the rows, if I didn't have grid template rows there, they would all expand in a similar way, but by adding the grid template rows, I've made it so that now the main area takes up more space and the others stay the same size. So this might work for us as a mobile layout, and we might not even worry about the grid fallback for mobile because it's fairly similar. There's not really much happening here yet. I'm going to try to create then inside of this media query, so for any page over 40 M's wide, we're going to add a little bit more complex layout. Again, we're going to use grid template columns, but we're going to set up a sidebar that's 12 M's and then a main space that's one fraction that takes up all of the remaining space available in the window. And you can see that everything sort of falls into place there automatically. The first column stays 12 M's, and the second column takes up whatever space is left. And that's pretty cool because that means that we can start doing layouts that really mix fixed units with fluid units in a more reliable way, which is a really nice thing about grid. And then I'm going to say we actually want three rows, so right now it's giving us two by default. We want three rows. The first one's going to be auto size, the second one's going to be as much space as we need, and then the footer will go along the bottom. So if I define those three rows, auto, one fraction, auto. Right now, we're not seeing that last row. It's collapsing because there's nothing in it. And what I'm going to do is tell the header to span two columns. I added grid column span two to the header, and that made it take up the entire top space. Instead of making the footer go the whole way across, I'm going to make the nav go the whole way down that side. So I'm going to add nav grid row span two, and it will go down that whole side, and then main and footer are both being pushed into place. I don't have to be more explicit here if I don't want to be. I could if it's useful for some reason, but you can see here now we have a mobile view on small screens, and when I make the screen bigger, it jumps to this layout. I can also change the height of the window, and you can see again that main and nav are stretching as much as they need to to take up the space, while the header and footer always remain the same size, and it's this sort of sticky footer where if the window gets big, the footer is still there, but if the window is smaller, we're able to scroll. Once we have these named areas, the only thing that we have to do then to make our header and navigation span the multiple columns and rows is assign them a grid area. So we say header, grid area banner, nav, grid area nav, main, grid area main, et cetera, and by giving them these names, we can just change in one place what the layout that we want is going to look like, and then that will change for anything assigned to that area. You can see there I changed banner to just span one. I could make nav come up here into the header, and it will take over that space, and that means that the parent element, in this case the body, can sort of control the layout from one place. So we can set up multiple layouts at different screen sizes or in different contexts, and everything else will fall into place. Another thing that we can do with grid that is really helpful for getting started is use this grid template areas. It's a way of using sort of ASCII art to define a layout. So I've defined our mobile layout here by just giving names to the four different areas we have in mobile, and let's just see them there. We have a banner, nav, main, and footer, and then I can add at a media query. All I have to do at a media query is change the structure of those areas. So now I've made banner go across two columns, and then nav in a single column, and then main side by side, and then nav and footer also side by side. So you can see here the banner is going to go across the top, the nav is going to come down the side, and then main and footer are going to fill in the gaps, and when we extend our window, that's what we see happen. And I think that's just a great way to get started with grid. That's really sort of the terms and pieces of code that you need to get started. And you can see that some of the fallbacks are going to happen in some ways automatically. If you turn off grid, you'll automatically get the mobile layout that you started with, and you can build on top of that. Have fun and get started with grid.