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>
CSS -> Using Grid
.parent {
display: grid;
place-items: center;
}
CSS -> Using Flex
.parent-flex {
display: flex;
place-items: center;
justify-content: center;
}
#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>
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;
}
#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>
CSS
.parent {
display: grid;
grid-template-columns: minmax(200px, 30%) 1fr;
}
.section-blue {
background-color: skyblue;
}
.section-green {
background-color: darkgreen;
color: white;
}
Top comments (0)