Simple CSS Modern Layouts

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.css
body {
  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.css
body {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
// etc
header {
  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.css
body {
  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!