How to divide by two any columns on CSS

user_10330931 0
Viewed 201

Here's a code from w3 schools.There are 9 boxes there.But I want to just divide the width of 3rd column of 1st row by two.How can i do this?Here's the code below

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>  
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>  
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>  
  </div>

</body>
</html>

This is how it should look: enter image description here

css-grid css html javascript
3 Answers

Option 1

You need to wrap the new containers in a new div and create a sub-grid:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="subgrid">
    <div class="grid-item">3</div>
    <div class="grid-item">3.1</div>
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Note

Please note that due to the padding: 20px; these subgrid columns don't fit into the width that is available in the default StackOverflow snippet view, which is why the width is adjusted so the first two regular columns are now less wide than the third containing the subgrid. Even if they were just wide enough, the browser decides how wide to render each column, just like in a table element.

Option 2

The other option is to have 4 columns defined on the .grid-container and then use grid-column-start: span 2; on cells 6 and 9. The new grid container would be defined as this if you want equal width columns:

grid-template-columns: 2fr 2fr 1fr 1fr;


.grid-container {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.colspan-2 {
  grid-column-start: span 2;
}
<!DOCTYPE html>
<html>

<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">3.1</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item colspan-2">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item colspan-2">9</div>
  </div>

</body>

</html>

user_37443040

Try Doing this :

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item3 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
  display: flex;
}

.grid-subitem {
   background-color: green;
   flex:1;
   border: 1px solid rgba(0, 0, 0, 0.8);
   height:100%;
   width: 100%;
   justify-content: center;
   align-items: center;
   display: flex;
}

<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item3">
        <div class="grid-subitem">3.1</div>
        <div  class="grid-subitem">3.2</div>
    </div>  


    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>  
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>  
  </div>

</body>
</html>
user_80339830 

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.div-span{
  width: 20%;
  display:table-cell;
}
.make-border{
  border-right: 1px solid rgba(0, 0, 0, 0.8);
}
<!DOCTYPE html>
<html>
<body>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>  
    <div class="grid-item">
     <div class="div-span make-border">Umar</div>
     <div class="div-span">Bilal</div>
    </div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>  
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>  
  </div>

</body>
</html>

user_73807940
Related