css Display: grid; cannot align

Asked

Viewed 295 times

2

I’m learning to use display:grid; What I want to do is that in the first column there is a blue square on top of a green and the second column is all red. What I have is

https://codepen.io/anon/pen/OjQEzK

Html

<div class="wrapper">
  <div class="upperLeft">UpperLeft</div>
  <div class="lowerLeft">LowerLeft</div>
  <div class="rightColumn">RightColumn</div>
</div>

Css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.upperLeft {
  grid-column: 1;
  grid-row: 1;
  background: blue;
}

.lowerLeft {
  grid-column: 1;
  grid-row: 2;
  background: green;
}

.rightColumn {
  grid-column: 2;
  grid-row: 1/2;
  background: red;
  align-self: strech;
}
css

  • But what’s the problem you’re having?

  • The problem was that the second column did not extend throughout the right column of the grid. After a lot of fight I found out that it was only modify in . rightColumn to stay grid-Row: 1/3;

1 answer

2

Hello,

I think you’re trying to do this:

https://codepen.io/CesarCEARA/pen/RZMogY

I made this example for you, see if you understand.

/* style */
.box {
    background-color: #444;
    color: #fff;
    padding: 20px;
    font-size: 150%;
}
/* background color */
.bg-green {
  background-color: green;
}
.bg-red {
  background-color: red;
}
.bg-blue {
  background-color: blue
}

/* grid system */
.wrapper {
    display: grid;
    grid-gap: 10px;
}
.a {
    grid-column: 1;
    grid-row: 1;
}
.b {
    grid-column: 1;
    grid-row: 2;
}
.c {
    grid-column: 2;
    grid-row: 1 / 3;
}
<div class="wrapper">
	<div class="box bg-blue a">A</div>
	<div class="box bg-green b">B</div>
  <div class="box bg-red c">C</div>
</div>

Note: Let me know if this helped you.

A hug

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.