10 Modern CSS Layouts With One Line
Modern CSS layout allows developers to write meaningful and powerful style rules with just a few keystrokes. The above discussion and the following post examine 10 powerful CSS layouts that do some extraordinary work.
01. Super center: place-items: center
For our first “single row” layout, let’s solve the biggest mystery in all of CSS: centering. I want you to know that using place-items: center makes this easier than you think.
First specify grid as the display method, then write place-items: center on the same element. place-items is a quick way to set align-items and justify-items at the same time. By setting it to center, both align-items and justify-items will be set to center.
.parent {
display: grid;
place-items: center;
}This allows content to be perfectly centered within the parent, regardless of internal size.
02. Deconstructing the pancake layout: flex: <grow> <shrink> <baseWidth>
Next we have deconstructed pancakes! This is a common layout for marketing websites, for example there might be a row of 3 items, usually with an image, a title, and then some text describing some of the features of the product. On mobile, we want them to stack nicely and scale as we increase screen size.
By using Flexbox to achieve this effect, you don’t need to use media queries to adjust the position of these elements when the screen size changes.
The abbreviation for flex stands for: flex: <flex-grow> <flex-shrink> <flex-basis> .
Because of this, if you want your boxes to fill to their <flex-basis> size, shrink to a smaller size, but not stretch to fill any additional space, write: flex: 0 1 <flex-basis> . In this case yours <flex-basis> is 150px, so it should look like this:
.parent {
display: flex;
}…