Grid에서 div를 정렬하는 방법은 무엇입니까?

질문

cms를 쓰고 페이지에 뉴스를 표시하고 싶습니다. 맨 위에는 제목과 뉴스가 있습니다. 나는 행에 2 열만 표시하려고했습니다. 어디에서 오류를 범하는지 모르겠습니다. 누군가 나를 도와 주길 바랍니다.

*{
    margin:0;
    padding:0;
}

#all  {
    background-color:silver;
    display:grid;
    grid-template-columns: 400px 400px;
    row-gap:10px;
    
    
    
     
}

#all p{
    
    border:3px solid red;
    box-sizing:border-box;
    font-size:10px;

}

<div id="all">
 <div class="tog">
    <h1 class="flex">
    <?php echo "<div class='flex'>" .$pokaz['tytul']. "</div>"; ?>
    </h1>
     <h2 class="tresc"> 
        <?php echo "<div class='tresc'>" .$pokaz['news']. "</div>"; ?>
    </h2>
    </div>
</div>
<?php
 }
?>

 

답변1

 

.tog {
  display: grid;
  grid-template-columns: 200px 200px;
  
  /* the rest is just to help visualize where the grid boundaries are. none of this is necessary. */
  gap: 24px;
  border: 1px dashed tomato;
  padding: 1rem;
}

.tog > * {
  /* just to help visualize where the grid boundaries are. not necessary for the layout. */
  border: 1px dashed grey;
}

<div class="tog">
  <div>tytul</div>
  <div>news</div>
</div>

Expand snippet

 

Grid를 정의하는 선택기 #all 에는 자식 < div class = "tog"> 가 하나만 있으므로 첫 번째 열을 채 웁니다. . 그리드 설정을 .tog 로 이동합니다.

 

 

 

 

출처 : https://stackoverflow.com/questions/63179944/how-to-arrange-a-div-in-a-grid