css - 我无法使用 css 网格定位我想要的东西

Question

我正在尝试将第一个文本定位在整行上，第二个在行的一半上，第三个在行的另一半上，但我不知道为什么不起作用

.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>

标签： cssgridcss-grid

Answer 1

由于您的 css 选择器，它不起作用，.news-content.butoane选择具有这两个类的元素，.news-content .butoane选择.butoane内部.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/