Grid has provided the column layout structure, but we'll now use Flexbox to achieve vertically-centered alignment of the flex children. Here, we have an instance where Grid and Flexbox can work together. Now, we need to address the content of the columns that we just created. Grid is superior to Flexbox in this ability to create inherently responsive column layouts without media queries. As we size down the viewport and the columns shrink, once they reach the minimum threshold of 30ch, they drop to a new virtual row. On save, the result for each section on large viewports is three equal-width columns. Let's add this modifier class to the features list items, as well as to the wrapper around the block quotes. Fr is a unique Grid key word that means to use a computed fraction of the available space. The second value is the max allowed width. The first value here will be the minimum allowed width. For the column behavior, we will use another unique to grid function called minmax. As the first property of repeat, the auto-fit keyword also stands in place of defining a specific number of grid columns and requests the grid algorithm to use the defined column width behavior as many times as needed for each content item available within the grid. The first value we'll use is auto-fit, which collapses any unused grid tracks, resulting in columns expanding up to the maximum available space or the max allowed width. We'll then define a grid property called grid-template-columns and use the unique grid function called repeat, which will apply the supplied values to each generated column. Now, we'll create a display-grid modifier class called autofit-columns. First though, we'll add the display-grid class on the feature list and then create a div around the block quote elements to be able to apply the display-grid class. However, using Grid, we can accomplish our goal in one line of CSS. If you've worked with other CSS frameworks, this is typically when you'd start applying multiple breakpoint utility classes to control the column width across viewport sizes. Although these remaining sections have completely different types of content and purpose, we actually have the same goal for their layout, which is equal width columns that responsively wrap when the content reaches a minimum acceptable width. Another quick improvement is applying our text-centering class to these two headlines and we'll use our list-unstyled class on the features list as well. We'll also apply these same classes to the aside holding our testimonials. First, on the main element, we'll add our container class in addition to the mx-auto class to apply auto margins for centering and the mt-large class, which will add some top margin. Stephanie Eckles: For our remaining landing page sections, we can use some of the classes we've created to quickly get them closer to completion.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |