Search code examples
htmlcssflexboxcss-grid

Create a grid under a flex box

I am currently creating a landing page for a website in which I used a flex display for one section. Below this section, I want to create a grid for another section, however the content is being display in between the "flex" content as opposed to below it and I am not sure how to fix it to make the content appear below in another section.

Below is the CSS and HTML of the flex box as well as the grid that I am attempting to add below:

.grid-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 4rem;
}

.image1,
.image2,
.image3 {
  height: 10rem;
  margin: 4rem 0 0 0;
}

.image {
  width: auto;
  height: auto;
}

@media (max-width: 800px) {
  .grid-container2 {
    flex-direction: column;
  }
}

.text {
  font-family: Merge;
  font-size: large;
}

.link {
  font-family: Merge;
  font-size: small;
  color: black;
}

.grid-container3 {
  display: grid;
  grid-template-areas: 'col1 col2 col3';
}
<div class="grid-container2">
  <div class="image1">
    <img class="image" src="images/Customer Landing Page.jpg" alt="Customer - Make a service request">
    <div class="text">Make a service request</div>
    <a class="link" href="">Sign up as a customer</a>
  </div>
  <div class="image2">
    <img class="image" src="images/Contractor Landing Page 2.jpg" alt="Contractor - Decide on jobs">
    <div class="text">Decide what orders you want to fulfill</div>
    <a class="link" href="">Decide which job suits you best</a>
  </div>
  <div class="image3">
    <img class="image" src="images/Contractor Landing Page.jpg" alt="Contractor or Business - Create account">
    <div class="text">Orders completed by professionals</div>
    <a class="link" href="">Sign up as a business or contractor</a>
  </div>
</div>

<div class="grid-container3">
  <div class="col1">
    1
  </div>
  <div class="col2">
    2
  </div>
  <div class="col3">
    3
  </div>
</div>

Below is what I am trying to achieve - create a grid below the three pictures where I can add the rounded rectangle and other objects/text. enter image description here

With the current code, the image is appearing in the flex box segment.

Solution

  • 1.) Your problem could be solved by creating a container class. You should set this class to use flex display and position it in column direction as follows:

    .container {
  display: flex;
  flex-direction: column;
}

    With this class applied to the div, all of your components will be stacked on top of each other. This way, your first component can be a div with three images and also set to use flex display. The second component can be a grid. The third component can be a list. And so on...

    2.) Also, you forgot to set your grid-container2 class to use flex display and position it in row direction by default.

    .grid-container2 {
  display: flex;
  flex-direction: row;
}

    3.) And in your grid-container3 class, you set the default column width to 1, which means that even above 800px viewport width, only one column will be displayed. To fix this, you should adjust the default column width to be greater than 1, or use a media query to modify the number of columns displayed on larger screens.

    .grid-container3 {
  display: grid;

  /* Can use it... */
  /* grid-template-columns: 1fr 1fr 1fr; */
  /* Or more professionally: */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 20px;
}

@media (max-width: 800px) {
  .grid-container3 {
    grid-template-columns: 1fr;
  }
}

    4.) To prevent images from overflowing out of the flex element, you can use max-width: 100% styling with height: auto.

    .image1,
.image2,
.image3 {
  height: auto;
  max-width: 100%;
}

    5.) Don't forget to add the meta tag that enables responsiveness from <head>:

    <meta content="width=device-width, initial-scale=1" name="viewport" />

    Based on your example:

    /* added */

.container {
  display: flex;
  flex-direction: column;
}

.grid-container2 {
  display: flex;
  flex-direction: row;
}


/* original */

.image1,
.image2,
.image3 {
  height: auto; /* edited */
  max-width: 100%; /* added */
  margin: 4rem 0 0 0;
}

.image {
  width: auto;
  height: auto;
}

@media (max-width: 800px) {
  .grid-container2 {
    flex-direction: column;
  }
}

.text {
  font-family: Merge;
  font-size: large;
}

.link {
  font-family: Merge;
  font-size: small;
  color: black;
}

.grid-container3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* edited */
  gap: 20px;
}

/* added */

@media (max-width: 800px) {
  .grid-container3 {
    grid-template-columns: 1fr;
  }
}
    <!-- in head -->
<meta content="width=device-width, initial-scale=1" name="viewport" />

<!-- in body -->
<div class="container">
  <!-- your code implement to main container -->
  <div class="grid-container2">
    <div class="image1">
      <img class="image" src="https://via.placeholder.com/150" alt="Customer - Make a service request">
      <div class="text">Make a service request</div>
      <a class="link" href="">Sign up as a customer</a>
    </div>
    <div class="image2">
      <img class="image" src="https://via.placeholder.com/150" alt="Contractor - Decide on jobs">
      <div class="text">Decide what orders you want to fulfill</div>
      <a class="link" href="">Decide which job suits you best</a>
    </div>
    <div class="image3">
      <img class="image" src="https://via.placeholder.com/150" alt="Contractor or Business - Create account">
      <div class="text">Orders completed by professionals</div>
      <a class="link" href="">Sign up as a business or contractor</a>
    </div>
  </div>

  <div class="grid-container3">
    <div class="col1"> 1 </div>
    <div class="col2"> 2 </div>
    <div class="col3"> 3 </div>
  </div>
</div>