CSS 격자 레이아웃을 사용하지 않고

Question

이 코드가 Google 크롬에 표시되면 표시되는 유일한 형식은 색상입니다. 각 <div>은 html 코드에 설정된 순서대로 서로 겹쳐 쌓입니다. 대한

#grid { 
 
    display: grid; 
 
    grid-template-columns: auto 1fr; 
 
    grid-template-rows: auto 1fr auto; 
 
} 
 

 
#title { 
 
    grid-column: 1; 
 
    grid-row: 1; 
 
    background-color: blue; 
 
} 
 

 
#score { 
 
    grid-column: 1; 
 
    grid-row: 3; 
 
    background-color: gray; 
 
} 
 

 
#stats { 
 
    grid-column: 1; 
 
    grid-row: 2; 
 
    align-self: start; 
 
    background-color: fuchsia; 
 
} 
 

 
#board { 
 
    grid-column: 2; 
 
    grid-row: 1/span 2; 
 
    background-color: green; 
 
} 
 

 
#controls { 
 
    grid-column: 2; 
 
    grid-row: 3; 
 
    justify-self: center; 
 
    background-color: red; 
 
}

<div id="grid"> 
 
    <div id="title">Game Title</div> 
 
    <div id="score">Score</div> 
 
    <div id="stats">Stats</div> 
 
    <div id="board">Board</div> 
 
    <div id="controls">Controls and more controls</div> 
 
</div>

How it's shown in Chrome

이

Answer 1

감사 응답의 내 CSS에 HTML 또는 본문 요소를 추가하지 않았다. 이러한 요소를 추가 한 후 형식이 변경되었습니다. 다시 한 번 감사드립니다.