How to leave minor div after major div on the same line?

Question

I am scaling several divs and have one that is larger than the others in width and height, the other divs that are after this one are too low, not aligned on the same line.

Note: execute the code below on full page, Follows the code:

body {
    background-color: #2E5173;
}

div {
    border-radius: 10px;
    background-color: white;
    margin: 10px;
    width: 240px;
    height: 250px;
    display: inline-block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}

.big {
    width: 508px;
    height: 508px;
}

 
  
  
  
  
  
  
  
  
 this div is very low
 this div is very low

The code above looks like this:

I need it to look like this:

Can anyone help?

user_8620333 · Answer

You can easily do this using CSS grid:

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,240px); /* The width */
  grid-auto-rows:250px; /* The height */
  grid-auto-flow:dense; /*This is the important property*/
  /* The margin */
  grid-gap:20px;
  padding:10px;
}
.container div {
  border-radius: 10px;
  background-color: #2E5173;
}

.big {
  grid-column:span 2; /* Take twice the width*/
  grid-row:span 2; /* Take twice the height*/
}


   
   
   
   
   
   
   
   
   
  this div is very low
  this div is very low

user_6054098 · Answer

CSS Grid can provide you with great control of your layouts and is not super complicated. A few of the resources I've used in the last are listed below:

www.w3schools.com/css/css_grid.asp
learncssgrid.com
css-tricks.com/snippets/css/complete-guide-grid

CSS Grid also works well with media queries if you need the page to be responsive.

How to leave minor div after major div on the same line?

2 Answers