Проблема с background в 2 колоннах, css grid

я хочу создать две колонны в full width, как они видят в изображении с css grid. Мне удалось сделать это, деталь состоит в том, что я размещаю width в ящик сына и стараюсь выравнивать ее в центр и я сделанный, чтобы терять.

Они могут видеть код здесь. https://codepen.io/jhoedram/pen/wmmaeR

.columnas {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  min-height: 350px;
}

.columna1 {
  background-color: orange;
  justify-self:end;
}

.columna2 {
  background-color: skyblue;
}

.content-columm {
  width: 350px;
}

body {
  padding: 0;
  margin: 0;;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aliquam tempora minus sunt dolor asperiores eveniet, repellendus ad cupiditate molestias assumenda hic tenetur illum quidem sapiente vero. Tempore, quae illum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s

(выполните это в полный экран для того, чтобы они увидели проблему)

Что я могу вредить? Кто-то может объяснять мне. С уже, большое спасибо.

introducir la descripción de la imagen aquí

1
задан 30.03.2018, 00:54
1 ответ

тема состоит в том, что не, из-за которого статья отец - grid, дети это будут, а следовательно проблема эта, они сын, что nesesiten также должны быть grid и весь css nesesario для, я оставляю тебе результат

body {
  padding: 0;
  margin: 0;;
}

.columnas {
  display: grid;
  grid-template-columns:repeat(2,1fr);
}

.columna1 {
  display: grid;
  background-color: #DC5437;
  color:white;
  text-align: center;
  justify-items: center;
}

.columna2 {
  background-color: skyblue;
  
}

.columna1 .content-columm{
      width: 80%;
}
<div class="columnas">
  <div class="columna1">
    <div class="content-columm"><h1>Allan loves Groove. Here’s why…</h1>
      <h3>We’ve tried everything, from Gmail on up to the enterprise level products. Nothing felt right until we found Groove.</h3> 
      <p>Allan Branch of Less Accounting</p>
      <a href="#">More customer stories</a>
    </div>
  </div>
  <div class="columna2">
    <div class="content-columm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, ipsa! Explicabo ullam voluptatem, esse tempore, officiis ratione velit laborum soluta deleniti dignissimos eum sapiente id quis modi eaque aspernatur eligendi.s
    </div>
  </div>
</div>
0
ответ дан 24.11.2019, 00:31

Теги

Похожие вопросы