CODEWITHSUNDEEP
htmlcssflexbox
user18510772
user18510772

Reputation:

I am having troubles fitting these cards in between the footer, header and sidebar

The empty space (you'll see when you put in the code) is where the cards should be stacked in a column like orientation like thisFinal Product

I am trying to fill that white space with the cards in that fashion but the sidebar keeps pushing it down and I've tried merging them and creating different divs to separate but no matter what it stays below and I do not know why.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}
<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="contents">

  <div class="sidebar">
    <a href="google.com">⭐ - link one</a>
    <a href="google.com">🦸🏽‍♂️ - link two</a>
    <a href="google.com">🖌️ - link three</a>
    <a href="google.com">👌🏽 - link four</a>
  </div>
  <div class="Cards">
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>
<div class="footer">
  The Odin Project ❤️
</div>

I would prefer if the solution was found ONLY using flexbox, no margin or anything.

Upvotes: 1

Views: 60

Answers (3)

PR7
PR7

Reputation: 1914

This can be easily done using Grid Layout. Just changed the contents container to flex and used grid for Cards container.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.contents {
  display: flex;
}

.Cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  padding: 12px;
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Holy Grail</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    MY AWESOME WEBSITE
  </div>

  <div class="contents">

    <div class="sidebar">
      <a href="google.com">⭐ - link one</a>
      <a href="google.com">🦸🏽‍♂️ - link two</a>
      <a href="google.com">🖌️ - link three</a>
      <a href="google.com">👌🏽 - link four</a>
    </div>
    <div class="Cards">
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>
  <div class="footer">
    The Odin Project ❤️
  </div>
</body>

</html>

Upvotes: 1

Kameron
Kameron

Reputation: 10846

Solution using the requested flex. You have to set flex on the main parent in this case .contents.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.contents {
  display: flex;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}
<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="contents">

  <div class="sidebar">
    <a href="google.com">⭐ - link one</a>
    <a href="google.com">🦸🏽‍♂️ - link two</a>
    <a href="google.com">🖌️ - link three</a>
    <a href="google.com">👌🏽 - link four</a>
  </div>
  <div class="Cards">
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>
<div class="footer">
  The Odin Project ❤️
</div>

Upvotes: 1

Ankit Pathak
Ankit Pathak

Reputation: 48

Use flex attribute Wrapping !! flex-wrap: wrap; By using this your white card automatically come down by take a line break.

Upvotes: 1

Related Questions