A nice contrast with the empty space on the left and right in the row with the sidebars and main content areas. Only the header and footer areas use these columns, making them stretch the full width. The first and last column get 4% of the available space. Both sidebars get 10% of the width, with a maximum of 150px. Working from the inside out, with the 1fr size value both the middle row and column take up any 'left over' space. By default, containers grow and shrink depending on the amount of content, visualized below in the 'No' Holy Grail image from wikipedia.įor viewports wider than 768px we switch to using 3 rows and 5 columns. This requirement stems from the common belief that search engines consider content higher up in the DOM Tree - code of the page - to be more important.Īnother important requirement is that on wider screens the sidebars and main content area have the exact same height, independent of their contents. Yet, in the source order the main content area needs to be placed before the sidebar with navigation. On small (mobile) screens all the sections need to stack, with the header on top, followed by the sidebar with the navigation, the main content area, the second sidebar and finally the footer. The Holy Grail Layout consists of five sections - a header, main content area with two sidebars, and a footer. But now, with CSS Grid, it has become a piece of sweet cake! The name comes from the elusive search to find a good implementation for creating this very specific layout structure. To kick oft this chapter we will be taking on a layout design that historically has been a tough nut to crack, the ' Holy Grail'.įor starters let me point out that the 'Holy Grail' is not necessarily better or more effective than other site structures. Looking at a use case for this seems like a good idea and is what we will do later in this chapter. This can be very helpful when responsively laying out 'unknown' content like, for example, content generated by Content Management Systems. When Repeat is used in combination with auto-fill (or auto-fit), tracks of a specific size or size range can be automatically generated as display room becomes available. To create five of these tracks simply set the repeat value to 5. That single piece of code creates two grid-tracks with a minimal size of 80px and allows them to automatically grow if needed by its contents. In the previous example this was used to specify the last two grid rows by simply using repeat( 2, minmax(80px, auto)). This method allows you to define a pattern, which is repeated a certain number of times. New functions such as the MinMax that we touched upon in the last example, in combination with new sizing units such as the fr offer all types of responsive layout possibilities.Īnother helpful function that the observant reader might have spotted in the last CSS Code box in the previous chapter is the Repeat function. Layouts that previously were difficult - sometimes even hairpullingly impossible - to create, are now within easy reach.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |