DEV Community

Ernesto Herrera
Ernesto Herrera

Posted on • Edited on

Ten Modern Layouts 🚀 [Part 1]

#emptystring

This is the first part of the "Ten Modern Layouts"

#1 Super Centered: place-items: center

One of the main day-to-day challenges in front end development is to center elements, the best way to do it is using flex or grid as shown in the following example.

HTML

<body> <div class="parent"> <div class="box" contenteditable> Hello, 👋😎 </div> </div> </body>
Enter fullscreen mode Exit fullscreen mode

CSS -> Using Grid

.parent { display: grid; place-items: center; }
Enter fullscreen mode Exit fullscreen mode

CSS -> Using Flex

.parent-flex { display: flex; place-items: center; justify-content: center; }
Enter fullscreen mode Exit fullscreen mode

#2 The Deconstructed Pancake: flex:

This is a common layout for marketing sites, which may have a row of 3 items, like image, title and description. On mobile, we'll want those three sections to stack nicely, and expand as the screen size increases.

HTML

 <div class="parent"> <div class="child-streching">one</div> <div class="child-streching">two</div> <div class="child-streching">three</div> </div> <div class="space"></div> <div class="parent"> <div class="child-no-streching">one</div> <div class="child-no-streching">two</div> <div class="child-no-streching">three</div> </div>
Enter fullscreen mode Exit fullscreen mode

CSS

 .parent { background-color: bisque; display: flex; flex-wrap: wrap; } .space { background-color: white; height: 100px; } .child-streching { flex: 1 1 300px; border: 1px solid red; background: lightpink; font-size: 2rem; text-align: center; } .child-no-streching { flex: 0 1 300px; border: 1px solid blueviolet; background: papayawhip; font-size: 2rem; text-align: center; }
Enter fullscreen mode Exit fullscreen mode

#3 Sidebar Says:grid-template-columns: minmax(,)...)

This demo uses the minmax function to create a grid layout. We're setting the minimum sidebar size to 200px, but on larger screens, it can stretch out to 30%. The sidebar will always take up 30% of its parent's horizontal space, unless that 30% becomes smaller than 200px.

HTML

<div class="parent"> <div class="section-blue" contenteditable> Min: 200px / Max: 30% </div> <div class="section-green" contenteditable> This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space. </div> </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; } .section-blue { background-color: skyblue; } .section-green { background-color: darkgreen; color: white; }
Enter fullscreen mode Exit fullscreen mode

here you can read part 2.

Top comments (0)