Ten Modern Layouts [Part 1]

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;
}