CSS 디스플레이로 내용 크기를 정의하는 방법 : 격자를 수용하는 것이 아니라

Question

이 Codepen은 페이지를 4 등분 사분면으로 나누는 그리드의 사용법을 보여줍니다. 각 사분면에는 캔버스 요소가 포함되어 있습니다. 이 기능을 사용하려면 Chrome에서 '실험용 웹 플랫폼 기능'을 사용하십시오.

목표는 그리드의 크기와 레이아웃을 기반으로 캔버스의 크기를 조정할 수 있도록하는 것입니다. HTML :

<div class="wrapper"> 
    <div class="box"><canvas></canvas></div> 
    <div class="box"><canvas></canvas></div> 
    <div class="box"><canvas></canvas></div> 
    <div class="box"><canvas></canvas></div> 
</div> 

CSS :

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    width: 100vw; 
} 

.wrapper { 
    height: 100%; 
    box-sizing: border-box; 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
} 

.box { 
    border: 2px solid #aaaaaa; 
    border-radius: 5px; 
} 

JS :

const els = Array.from(document.querySelectorAll('.wrapper div')) 
const drawCanvases = function (els) { 
    els.forEach(el => { 
    const can = el.querySelector('canvas') 
    can.width = can.parentElement.clientWidth 
    can.height = can.parentElement.clientHeight-4 


    var ctx = can.getContext("2d") 
    ctx.clearRect(0, 0, can.width, can.height) 
    ctx.font = "30px Arial" 

    var mx = can.width/2 
    var my = can.height/2 
    ctx.fillText(`${can.width}px, ${can.height}px`,mx,my) 
    }) 
} 

window.addEventListener('resize', e => { 
    drawCanvases(els) 
}) 

drawCanvases(els) 

문제는 캔버스 위와 같이 부모 div 요소로 크기를 설정 한 경우, 그리드 것이다 열/행 크기를 더 작게 만들 수 없습니다. 요소의 중앙에 캔버스 크기를 표시하는 Codepen을 시도하십시오. 캔버스 요소를 끌어서 만들 수는 있지만 결코 축소 할 수는 없습니다.

캔버스에 설정해야하는 크기를 수동으로 다시 계산하지 않고도이 작업을 수행 할 수 있습니까?

Answer 1

대답이 @GCyrillus 의해 댓글에서 언급 위치를 설정하는 것 질문을하지만 캔바스에 스타일을 추가하여 그리드 행과 열의 크기를 조정할 때 캔바스 크기가 고려되지 않도록합니다.

이 게시물에서 Chrome의 실험용 웹 플랫폼 기능 (및 다른 브라우저와 유사)을 사용하여이 디스플레이 : 그리드 레이아웃이 올바르게 작동하는지 확인해야합니다.

Answer 2

4 개의 div 요소는 항상 너비가 2 배인 display: grid이므로 뷰포트 너비의 50 %입니다. canvas 요소의 크기를 부모 div으로 설정하는 대신 각 canvas의 너비를 뷰포트 너비의 50 % (또는 래퍼 요소의 너비가 50 % 인 너비)로 설정하십시오.

이 데모는 Experimental Web Platform 기능을 사용하도록 설정 한 경우에만 Chrome에서 작동합니다. 당신이 효과를 확인하기 위해 SO 창 크기를 조정할 수 없기 때문에

const els = Array.from(document.querySelectorAll('.wrapper div')) 
 

 

 
    els.forEach(el => { 
 
    const can = el.querySelector('canvas') 
 
    var ctx = can.getContext("2d") 
 
    ctx.clearRect(0, 0, can.width, can.height) 
 
    can.width = window.innerWidth * .5 
 
    can.height = 300 
 
    ctx.font = "30px Arial" 
 
    ctx.fillText(`${can.width}px`,10,50) 
 
    })

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

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

 
canvas { 
 
    height: 300px; 
 
}

<div class="wrapper"> 
 
    <div><canvas></canvas></div> 
 
    <div><canvas></canvas></div> 
 
    <div><canvas></canvas></div> 
 
    <div><canvas></canvas></div> 
 
</div>

여기에 같은 효과를 보여주는 Codepen입니다.

canvas { 
    position: absolute; 
} 

이 Codepen가있는 것과 동일하다 : 상대 div에 내에 유지되는 캔버스 요소 절대 :