css Display: grid; I can not align

Question

css Display: grid; I can not align

Navigation

#1 by (0 votes)

1

I'm learning how 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

link

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

asked by anonymous 18.08.2017 / 23:23

1 answer

Delphi - Picking property values with GetPropValue () PHP Select Option MYSQL

score 0 · Answer 1

Hello,

I think you're trying to do this:

link

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