.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.