I cannot position things how i want with css grid

Question

I'm trying to position the first text on entire row, second on half of the row and third on the other half of the row but I don't know why doesn`t work

.news-content{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  
}
.news-content.butoane{
  grid-row:1/3;
  grid-column:1/3;
}
.news-content.imagine{
  grid-row:2/3;
  grid-column:1/2;
}
.news-content p{
  grid-row:2/3;
  grid-column:2/3;
}

<div class="news-content">
  <div class="butoane">
     <button>Butonul1</button>
  <button>Butonul2</button>
    <p>FIRST TEXT FIRST TEXT sit amet consectetur adipisicing elit. Tenetur, ipsa! efgkermgmergmermgergmerirmg</p>
  </div>
 <div class="imagine">
<p> SECOND TET SECOND TEXT  amet consectetur adipisicing elit. Harum deserunt perspiciatis autem aspernatur! Eum, a facilis qui maxime esse omnis consectetur tempore quisquam veritatis tenetur repudiandae, modi, fuga placeat est.</p>
  </div>
  <p>LAST TEXT LAST TEXT sit amet consectetur adipisicing elit. Cum, praesentium laboriosam obcaecati quae officia officiis voluptatem quia illum dicta mollitia itaque. Veniam labore quo itaque molestias quaerat, omnis cupiditate numquam!</p>
</div>

score 0 · Accepted Answer · answered Jul 01 '19 at 19:15

It doesnt work because of your css selectors, .news-content.butoane selects an element with those two classes, .news-content .butoane selects .butoane inside .news-content

.news-content{
  display: grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);

}
.news-content .butoane{
  grid-row:1/3;
  grid-column:1/3;
}
.news-content .imagine{
  grid-row:2/3;
  grid-column:1/2;
}
.news-content p{
  grid-row:2/3;
  grid-column:2/3;
}

https://jsfiddle.net/wwWaldi/hy4pbnzx/1/

I cannot position things how i want with css grid

1 Answers1