how to divide css grid like first column 50%, second column 50% and third column 100%?-CodePudding


    .main-dev {
        display: grid;
        grid-template-columns: 50% 50%;
    }

I want to arrange my grid into 50% 50% and 100% structures. I have attached the required output image.

Current output :

Expected Output :

CodePudding user response：

CSS:

.item{
    border: 1px solid red;
    text-align: center;
    padding: 10px;
}
.main-dev {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 200px;
}
.item3{
    grid-column: 1 / 3; /* or grid-column: 1 / span 2 */
}

HTML:

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
</div>

CodePudding user response：

You can try this,

.item3 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>  
  </div>

CodePudding user response：

So. Let's imagine you have 3 items with class names item1, item2, item3.

Here is the style for them:

.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }

div{
     display: grid;
     grid-template-areas:
       'item1 item2'
       'item3 item3'
     grid-gap: 10px;}

CodePudding user response：

First of all, you can use col-. Here is my example:

.red{
border: 1px solid red;
height:200px;
}

.col-6{
float:left;
width:50%;
}
.col-12{
float:left;
width:100%;
}

<body>

    <div >
    <div ></div>
    </div>
    <div >
    <div ></div>
    </div>
    <div >
    <div ></div>
    </div>


</body>

And you can modify the code as you like.