css grid layout 3 columns and 2 columns grid [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want a simple grid with first 3 columns and second 2 equal length columns with css grid layout.
Can anyone help me? I am having issues using grid span.

Answer 1

Surprisingly, there seems to be no way to do this using CSS Grid. I can see it working with subgrids, but they're not yet available (as of February 2019). The good news is that this is a pretty straightforward task using Flexbox.
.container,
.item {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
background-color: red;
height: 50px;
border: 1px solid black;
}
/* Begin at 3rd child; end at 1st child */
.item:nth-child(-n +3) {
flex-basis: calc(100% / 3);
}
/* Begin at 4th item, apply to last child */
.item:nth-child(n+4) {
flex-basis: calc(100% / 2);
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
https://jsfiddle.net/z9j1v3uc/1/

Answer 2

* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid black;
border-radius: 5px;
background-color: cadetblue;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 /span 2;
grid-row: 1;
}
.two {
grid-column: 3/span 2;
grid-row: 1;
}
.three {
grid-column: 5 /span 2;
grid-row: 1;
}
.four {
grid-column: 1/ span 3 ;
grid-row: 2;
}
.five {
grid-column: 4 / span 4;
grid-row: 2;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
</div>