How to provide a grid item with maximum width without pushing other grid items-CodePudding

   

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FFFBF1;
}
.grid{

    background: white;
    padding: 0.5rem;
    width: 50%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 15px;
    padding: 1rem;
    
}
.item{
    background: #7FFFD4;
    display: flex; 
    
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    
}
.item:nth-of-type(1){
grid-column: 1/3;
    
}
.item:nth-of-type(4){
grid-column: 2/4;
    
}

.item:nth-of-type(6){
grid-column: 2/4;
    
}

 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   
    <title>Page title</title>
    
</head>
<body>
    
<div >
 <div > 1 </div>
  <div >2 </div>
   <div > 3</div>
    <div > 4</div>
     <div > 5</div>
      <div >6 </div>
       <div >7 </div>
        <div > 8</div>
         <div > 9</div>
         <div >10 </div>
         <div > 11</div>
         <div >12 </div>
</div>


</body>
</html>

I want to make something like the below image I want to create smtg similar to above image providing item 6 (which I distinguish using text rather then classes) to take maximum width without pushing item 5 and item 7 on new line, decreasing the width of item 5 and 7 didn't change anything, the gap between those elements remained same, like we could use flex 1 if we use flexbox but as a beginner on grid I can't find out any other way of doing this, so I am here to ask help

CodePudding user response：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #FFFBF1;
}

.grid {
  background: white;
  padding: 0.5rem;
  width: 50%;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 15px;
  padding: 1rem;
  margin-block: 1em;
}

.item {
  background: #7FFFD4;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
}

.item:nth-of-type(n) {
  grid-column: span 2;
}

.item:nth-child(4) {
  grid-column: 1/2;
}

.item:nth-child(5) {
  grid-column: 2 / 6;
}

.item:nth-child(6) {
  grid-column: 6 / 7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <title>Page title</title>

</head>

<body>

  <div >
    <div > 1 </div>
    <div >2 </div>
    <div > 3</div>
    <div > 4</div>
    <div > 5</div>
    <div >6 </div>
    <div >7 </div>
    <div > 8</div>
    <div > 9</div>
    <div >10 </div>
    <div > 11</div>
    <div >12 </div>
  </div>


</body>

</html>

CodePudding user response：

You can add margins to the divs like the following:

Add margin-right property of 4th div to 33%
Add margin-right and margin-left properties of the 5th div to -33%
Add margin-left property of 6th div to 33%

See following code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #FFFBF1;
}

.grid {
  background: white;
  padding: 0.5rem;
  width: 50%;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 15px;
  padding: 1rem;
}

.item {
  background: #7FFFD4;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
}


/* Added margin right of 33% for 4th div*/

.item:nth-of-type(4) {
  margin: 0 33% 0 0 !important;
}


/* Added margins right and left of -33% for 5th div*/

.item:nth-of-type(5) {
  margin: 0 -33% 0 -33% !important;
}


/* Added margin left of 33% for 6th div*/

.item:nth-of-type(6) {
  margin: 0 0 0 33% !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <title>Page title</title>

</head>

<body>

  <div >
    <div > 1 </div>
    <div >2 </div>
    <div > 3</div>
    <div > 4</div>
    <div > 5</div>
    <div >6 </div>
    <div >7 </div>
    <div > 8</div>
    <div > 9</div>
    <div >10 </div>
    <div > 11</div>
    <div >12 </div>
  </div>


</body>

</html>