Simple CSS Modern Layouts

Richard Chea
3 min readNov 9, 2020

--

Using CSS to build out modern layouts is way easier than you think. All you’ll need is a few lines of code to accomplish doing it. We’re going to go through a few examples to help get you started.

  1. Centered Layout. This will help in centering elements within elements.
centered.html<div class="parent" >
<div class="child" contenteditable>Centered</div>
</div>
centered.css.parent {
display: grid;
place-items: center;

background: lightblue;
width: 500px;
height: 500px;

resize: both;
overflow: auto;
}
.child {
// etc.
padding: 0.5rem;
border-radius: 10px;
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
}
body {
font-family: system-ui, serif;
}

2. The Classic. This is a classic layout with the header on top, left and right sidebar, the main content in the middle of the page, and the footer on the bottom.

classic.html<header><h1 contenteditable>Header</h1></header>
<div class="left-sidebar" contenteditable>Left Sidebar</div>
<main contenteditable>Main</main>
<div class="right-sidebar" contenteditable>Right Sidebar</div>
<footer contenteditable>Footer Content</footer>
classic.cssbody {
display: grid;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
}
div {
display: grid;
place-items: center;
}
.span-12 {
background: lightpink;
grid-column: 1 / 13;
}
.span-6 {
background: lightblue;
grid-column: 1 / 7;
}
.span-4 {
background: coral;
grid-column: 4 / 9;
}
.span-2 {
background: yellow;
grid-column: 3 / 5;
}
body {
font-family: system-ui, sans-serif;
}

3. The Simple Stack. One of the most common and simple to set up is a layout with a header at the top, main content in the middle, and footer on the bottom.

simplestack.html<header><h1>Header</h1></header>
<main>Main</main>
<footer>Footer</footer>
simplestack.cssbody {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr auto;
}
// etcheader {
background: lightpink;
padding: 2rem;
}
main {
background: coral;
}
footer {
background: wheat;
padding: 2rem;
text-align: center;
}
body {
font-family: system-ui, sans-serif;
}

4. The Sidebar. Another simple layout and straight to the point.

sidebar.html<div class="sidebar" contenteditable>
Side <br/>
</div>
<p class="content" contenteditable>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?</p>
sidebar.cssbody {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
padding: 0;
margin: 0;
}
.sidebar {
height: 100vh;

// etc.
background: lightpink;
font-size: 2rem;
text-align: center;
}
.content {
padding: 2rem;
}
body {
font-family: system-ui, serif;
}

All of these layouts can be used as the foundation for your next project. Take them and have fun!

--

--