0

I have a layout which is a mixture of 3 and 2 columns(attached image below), i need to know if this layout is achievable in css grids using single container as i have already tried using it with grid-template-areas and row/col spaning but couldn't figure it out. The problem is with defining grid-template-columns where i have defined it with 3 cols to have my 3 col layout but for the bottom row i need two col 50% each. Any help will be appreciated. enter image description here

Here is my code.

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 10px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: url("./images/topography.svg"),
    linear-gradient(110deg, #f93d66, #6d47d9);
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  /* background: white; */
  background-attachment: fixed;
  letter-spacing: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow); /* best colour */
}

.item p {
  margin: 0 0 5px 0;
}

/*layout*/

.container{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
}

.item-1{
	grid-row: span 2;
}

.item-4{
	grid-column: 3 / 3;
	grid-row: 1 / span 2;
}

.item-5,.item-6{
	grid-row: span 2;
}

.item-10{
	grid-column: span 2;
}
<div class="container">
    <div class="item item-1">
    	1
    </div>
    <div class="item item-2">
    	2
    </div>
    <div class="item item-3">
    	3
    </div>
    <div class="item item-4">
    	4
    </div>
    <div class="item item-5">
    	5
    </div>
    <div class="item item-6">
    	6
    </div>
    <div class="item item-7">
    	7
    </div>
    <div class="item item-8">
    	8
    </div>
    <div class="item item-9">
    	9
    </div>
    <div class="item item-10">
    	10
    </div>
    <div class="item item-11">
    	11
    </div>
    <div class="item item-12">
    	12
    </div>
  </div>

Improve this question
1

1 Answer 1

Reset to default
4

You can do that. Here is the edited CSS:

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 10px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: url("./images/topography.svg"),
    linear-gradient(110deg, #f93d66, #6d47d9);
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  /* background: white; */
  background-attachment: fixed;
  letter-spacing: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow); /* best colour */
}

.item p {
  margin: 0 0 5px 0;
}

/*layout*/

.container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
}

.item-1{
    grid-row: span 2;
  grid-column: span 2;
}

.item-2{
  grid-column: span 2;
}

.item-3{
  grid-row: 2 / 3;
  grid-column: 3 / 5;
}

.item-4{
    grid-column: 5 / 7;
    grid-row: 1 / span 2;
}

.item-5, .item-6{
    grid-row: span 2;
  grid-column: span 2;
}

.item-7, .item-8{
  grid-column: span 2;
}

.item-9{
    grid-row: span 2;
  grid-column: span 2;
}

.item-10{
    grid-row: span 2;
  grid-column: span 4;
}

.item-11{
    grid-row: span 2;
  grid-column: span 3;
}

.item-12{
    grid-row: span 2;
  grid-column: span 3;
}
Improve this answer
2

Not the answer you're looking for? Browse other questions tagged or ask your own question.