Ten modern layouts in a CSS line

Modern CSS layouts allow developers to write really meaningful and robust style rules with just a few keystrokes. The talk above and this post afterwards examine 10 powerful lines of CSS that do a lot of heavy lifting.

To follow or play these demos on your own, check out the Glitch insert above or visit 1linelayouts.glitch.me.

01. Supercenter: place-items: center

For the first 'single line' layout, let's solve the biggest mystery in the entire CSS realm: centering things. I want you to know that it is easier than you think with place-items: center.

First specify grid As the display method, and then write place-items: center in the same element. place-items is a shorthand way to define both align-items and justify-items Right away. Setting it in center, both of them align-items and justify-items are configured to center.

.parent {
  display: grid;
  place-items: center;
}

This allows content to be perfectly centered within the parent, regardless of intrinsic size.

02. The deconstructed pancake: flex:

Next we have the deconstructed pancake! This is a common layout for marketing sites, for example, which can have a row of 3 items, usually with an image, a title, and then some text, describing some features of a product. On mobile devices, we want them to stack well and expand as we increase the screen size.

By using Flexbox for this effect, you will not need media queries to adjust the location of these items when the screen is resized.

the flex abbreviation means: flex:.

So if you want your boxes to be filled to your size, shrink into smaller sizes, but not section to fill in any additional spaces, type: flex: 0 1. In this case, your it is 150px so it looks like this:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

If you do you want the boxes to stretch and fill the space as they wrap to the next line, set the to 1, so it would look like this:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Now, as the screen size increases or decreases, these flexible elements shrink and grow.

This demo takes advantage of min MAX function for grid layouts. What we are doing here is setting the minimum size of the sidebar to 150px, but on larger screens, allowing that to be extended to 25%. The sidebar will always occupy 25% of his father's horizontal space until 25% gets smaller than 150px.

Add this as a grid-template-columns value with the following value:
minmax (150px, 25%) 1fr. The element in the first column (the sidebar in this case) gets a minmax from 150px to 25%, and the second element (the main section here) occupies the rest of the space as a single 1fr clue.

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. Stack of pancakes: grid-template-rows: auto 1fr auto

Unlike Deconstructed Pancake, this example does not wrap its children when the screen size changes. Commonly known as sticky footer, this layout is often used for both websites and apps, in mobile apps (the footer is commonly a toolbar) and websites (single page apps often use this global layout).

Adding display: grid the component will give a single column grid, however the main area will only be as tall as the content with the footer underneath.

To make the footer stick to the end, add:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

This sets the header and footer content to automatically take the size of their children and apply the remaining space (1fr) to the main area, while the car The size row will take the size of the minimum content of its children, so as the content grows in size, the row itself will grow to fit.

05. Classic arrangement of the Holy Grail: grid-template: auto 1fr auto / auto 1fr auto

For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main content. It is similar to the previous design, but now with side bars!

To write this entire grid using a single line of code, use the grid-template property. This allows you to set rows and columns at the same time.

The property and value pair is: grid-template: auto 1fr auto / auto 1fr auto. The forward slash between the first and second lists separated by spaces is the jump between rows and columns.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

As in the last example, where the header and footer had auto-sized content, here the left and right sidebar are automatically sized based on the intrinsic size of their children. However, this time it is horizontal in size (width) instead of vertical (height).

06. Grid of 12 sections: grid-template-columns: repeat (12, 1fr)

Next we have another classic: the 12-bay grille. You can quickly write grids in CSS with the repeat () function. Using: repeat (12, 1fr); for the columns of the grid template it gives you 12 columns each 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

Now that you have a 12 column track grid, we can place our children on the grid. One way to do this would be to place them using grid lines. For example, grid-column: 1/13 it would span from the first line to the last (13) and span 12 columns. grid-column: 1/5; would cover the first four.

Another way to write this is by using the span keyword. With span, sets the start line and then the number of columns to span from that start point. In this case, grid-column: 1 / span 12 would be equivalent to grid-column: 1/13and grid-column: 2 / span 6 would be equivalent to grid-column: 2/8.

.child-span-12 {
  grid-column: 1 / span 12;
}

07. RAM (Repeat, Auto, MinMax): grid-template-columns (auto-fit, minmax ( , 1fr))

For this seventh example, combine some of the concepts you've already learned to create a responsive layout with flexible and auto-placed children. Looking good. The key terms to remember here are repeat, auto- (fit | fill)and minmax () ', remembered by the acronym RAM.

All together, it looks like:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

You are using repeat again, but this time, using the auto-fit keyword instead of an explicit numeric value. This allows automatic placement of these child elements. These children also have a minimum base value of 150px with a maximum value 1fr, that is, on smaller screens, they will occupy the entire 1fr wide, and as they reach 150px wide each, will begin to flow towards the same line.

With auto-fit, the boxes will stretch as their horizontal size exceeds 150px to fill all the remaining space. However, if you change this to auto-fill, they won't stretch when their base size is exceeded in the minmax function:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. Alignment: justify-content: space-between

For the following design, the main point to demonstrate here is justify-content: space-between, which places the first and last child elements on the edges of its bounding box, with the remaining space evenly distributed between the elements. For these cards, they are placed in a Flexbox display mode, with the address set to column using flex-direction: column.

This places the title, description, and image block in a vertical column within the main card. So, applying justify-content: space-between anchors the first (title) and last (image block) elements to the edges of the flex box, and the descriptive text between them is placed equally spaced at each end point.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. Hold my style: clamp ( , , )

This is where we get into some techniques with less browser support, but they have some really cool implications for responsive UI design and layouts. In this demo, you are setting the width using a clamp as follows: width: clamp ( , , ).

This sets an absolute minimum and maximum size and an actual size. With values, that can look like this:

.parent {
  width: clamp(23ch, 50%, 46ch);
}

The minimum size here is 23ch or 23 character units, and the maximum size is 46ch, 46 characters. Character width units are based on the element's font size (specifically the width of the 0 glyph). The 'actual' size is 50%, which represents the 50% of the main width of this element.

What clamp () The function you are doing here is to allow this element to retain a 50% width until 50% is greater than 46ch (in larger viewports) or smaller than 23ch (in smaller viewports). You can see that as I stretch and shrink the main size, the width of this card increases to its maximum clamping point and decreases to its minimum clamping point. It then stays centered on the parent as we have applied additional properties to center it. This allows for more legible layouts, as the text won't be too wide (above 46ch) or too squashed and narrow (less than 23ch).

This is also a great way to implement responsive typography. For example, you could write: font-size: clamp (1.5rem, 20vw, 3rem). In this case, the font size of a title would always remain between 1.5rem and 3rem but it would grow and shrink depending on the 20vw actual value to fit the width of the viewport.

This is a great technique to ensure readability with a minimum and maximum size value, but remember that it is not supported by all modern browsers so make sure you have alternatives and do your testing.

10. Respect for appearance: aspect-ratio: /

And finally, this last design tool is the most experimental of the bunch. It was recently introduced in Chrome Canary in Chromium 84, and there is an active effort from Firefox to implement it, but it is not currently in any stable browser editions.

However, I want to mention this because it is a very frequently encountered problem. And that's just keeping the aspect ratio of an image.

With the aspect-ratio property, when changing the card size, the green visual block maintains this aspect ratio of 16 x 9. We respect the aspect ratio with aspect-ratio: 16/9.

.video {
  aspect-ratio: 16 / 9;
}

To maintain a 16 x 9 aspect ratio without this property, you must use a padding-top chop and give it a fill of 56.25% to establish a relationship between the top and the width. Soon we will have a property for this to avoid the hack and the need to calculate the percentage. You can make a square with 1 / 1 ratio, a 2 to 1 ratio with 2 / 1, and really anything you need to scale this image with a set size ratio.

.square {
  aspect-ratio: 1 / 1;
}

While this feature is still booming, it's good to know as it solves a lot of developer conflicts that I have faced many times, especially when it comes to videos and iframes.

conclusion

Thanks for following this journey through 10 powerful lines of CSS. For more information, see the full videoand test the demonstrations yourself.