CSS 그리드 프로젝트 - 반응형 태양광 시스템 - 부품 2

1부에서 시작하여 궤도가 있는 두 개의 행성을 다루었습니다.

토성과 그 너머

다른 행성(실제로는 2개)을 추가할 준비를 하면서 다음 조치는 그리드 크기를 다시 두 배로 늘리는 것입니다.

grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);

이 경우 Mozilla의 검사관이 제공한 그리드 번호를 사용하여 다음 두 행성을 추가하기 전에 해왕성과 천왕성에 대한 행 및 열 할당을 조정할 수 있습니다.

.neptune {
   grid-row: 1/2;
   grid-column: 1/9;
}
.neptune-orbit {
   grid-row: 1/9;
   grid-column: 1/9;
}
.uranus {
   grid-row: 2/3;
   grid-column: 1/9;
}
.uranus-orbit {
   grid-row: 2/8;
   grid-column: 2/8;
}

그러면 기본적으로 이전과 동일한 디자인으로 되돌아갑니다. 그러나 이제 두 개의 행성과 각각의 궤도를 추가할 수 있습니다. 인스펙터에 제공된 줄 번호를 계속 사용하면 다음 두 행성을 바로 배치할 수 있습니다.

<div class="saturn-orbit orbit"></div>
<div class="saturn planet"></div>
<div class="jupiter-orbit orbit"></div>
<div class="jupiter planet"></div>

.saturn {
   grid-row: 3/4;
   grid-column: 1/9;
}
.saturn-orbit {
   grid-row: 3/7;
   grid-column: 3/7;
}
.jupiter {
   grid-row: 4/5;
   grid-column: 1/9;
}
.jupiter-orbit {
   grid-row: 4/6;
   grid-column: 4/6;
}

더블

이제 우리는 여기에서 시스템을 개발하고 있지만(말장난 의도) 지루한 입찰이지만 그리드를 다시 두 배로 늘린 다음 변경 사항을 설명하기 위해 이전의 모든 행 및 열 할당을 조정할 수 있습니다.

업데이트를 위해 이 시점에서 우리의 코드는 다음과 같습니다.

<main>
       <div class="neptune-orbit orbit"></div>
       <div class="neptune planet"></div>
       <div class="uranus-orbit orbit"></div>
       <div class="uranus planet"></div>
       <div class="saturn-orbit orbit"></div>
       <div class="saturn planet"></div>
       <div class="jupiter-orbit orbit"></div>
       <div class="jupiter planet"></div>
       <div class="mars-orbit orbit"></div>
       <div class="mars planet"></div>
       <div class="earth-orbit orbit"></div>
       <div class="earth planet"></div>
       <div class="venus-orbit orbit"></div>
       <div class="venus planet"></div>
       <div class="mercury-orbit orbit"></div>
       <div class="mercury planet"></div>
   </main>

body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   display: grid;
   place-items: center;
   height: 100vh;
} 
main {
   width: 90vw;
   height: 90vw;
   margin: 5vh 5vw;
   border: 1px solid #cccccc;
   display: grid;
   grid-template-columns: repeat(16, 1fr);
   grid-template-rows: repeat(16, 1fr);
}
.planet {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   background: #ffffff;
   justify-self: center;
   margin-top: -2.5vmin;
}
.orbit {
   border-radius: 50%;
   border: 2px solid #000000;
}
.neptune {
   grid-row: 1/2;
   grid-column: 1/17;
}
.neptune-orbit {
   grid-row: 1/17;
   grid-column: 1/17;
}
.uranus {
   grid-row: 2/3;
   grid-column: 1/17;
}
.uranus-orbit {
   grid-row: 2/16;
   grid-column: 2/16;
}
.saturn {
   grid-row: 3/4;
   grid-column: 1/17;
}
.saturn-orbit {
   grid-row: 3/15;
   grid-column: 3/15;
}
.jupiter {
   grid-row: 4/5;
   grid-column: 1/17;
}
.jupiter-orbit {
   grid-row: 4/14;
   grid-column: 4/14;
}
.mars {
   grid-row: 5/6;
   grid-column: 1/17;
}
.mars-orbit {
   grid-row: 5/13;
   grid-column: 5/13;
}
.earth {
   grid-row: 6/7;
   grid-column: 1/17;
}
.earth-orbit {
   grid-row: 6/12;
   grid-column: 6/12;
}
.venus {
   grid-row: 7/8;
   grid-column: 1/17;
}
.venus-orbit {
   grid-row: 7/11;
   grid-column: 7/11;
}
.mercury {
   grid-row: 8/9;
   grid-column: 1/17;
}
.mercury-orbit {
   grid-row: 8/10;
   grid-column: 8/10;
}

우리의 모든 행성인 RIP pluto와 함께 우리 시스템의 모습은 다음과 같습니다.



이제 우리에게는 좋은 기반이 있습니다. 우리는 이 모든 행성이 회전할 수 있는 태양을 놓치고 있습니다. 그것이 당신의 것이 아닌 한, 어디서부터 시작해야할지 모르겠습니다. 태양에 대한 div를 추가하고 다음 CSS를 추가합니다.

.sun {
   grid-row: 8/10;
   grid-column: 8/10;
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   background: #000000;
   justify-self: center;
   align-self: center;
}

수은과 동일한 그리드 위치에 놓을 수 있지만 수직 및 수평 모두 가운데에 배치합니다.

그리고 CSS 그리드가 있는 기본 반응형 태양광 시스템이 있습니다. 이제 크기, 간격, 비율 및 상상할 수 있는 모든 것이 완전히 벗어났지만 작동합니다!

마무리

계속하기 전에 색상을 반전하겠습니다. 흰색이었던 것은 #101010으로 만들고 검은색은 #ffffff로 뒤집습니다. 궤도 테두리도 2px 점선 #ffffff로 변경하겠습니다.

이제 모든 것이 올바르게 정렬되고 그리드가 해결되었으므로 크기와 간격 비율을 좀 더 사실적으로 만들고 싶습니다.

이 시점에서 나는 몇 가지 공격적인 실수를 통해 귀중한 통찰력을 배우는 데 15분을 보냈습니다.

내 그리드의 간격이 어떻게 변할지 생각하면서 열과 행이 서로를 반영해야 한다는 것을 알았습니다. 또한 열과 행은 각 속성 내에서 회문으로 작성됩니다. 즉, 5px, 8px 및 10px의 행 간격을 사용하면 다음 세 행은 10px, 8px 및 5px가 됩니다. 전체 행 속성은 5px 8px 10px 10px 8px 5px입니다. 따라서 간격을 계획하고 단순히 행 속성 선언을 긴 형식으로 작성하기로 결정했습니다.

grid-template-columns: 3fr 2.5fr 2.5fr 2fr 1fr 1fr .75fr 3fr 3fr .75fr 1fr 1fr 2fr 2.5fr 2.5fr 3fr;
   grid-template-rows: 3fr 2.5fr 2.5fr 2fr 1fr 1fr .75fr 3fr 3fr .75fr 1fr 1fr 2fr 2.5fr 2.5fr 3fr;

.planet {
   height: 2vmin;
   width: 2vmin;
   margin-top: -1vmin;
   }

이 간격으로 정했습니다. 그렇게 예쁘게 쓰여진 것은 아니지만 이봐. 나는 또한 각 행성 사이의 거리가 약간 막히게 되었기 때문에 기본 행성 크기를 줄였습니다.

각 행성에 대해 높이와 너비를 같은 숫자로 조정하고 margin-top을 변경하여 해당 숫자의 절반을 뺍니다.

이러한 모든 변경 사항을 통해 우리는



지금까지는 정말 반응이 좋았지만 화면이 1000px를 넘으면 이상하게 보이기 시작합니다. 그래서 메인 섹션을 600px로 제한할 것입니다.

max-width: 600px;
max-height: 600px;

하지만 이제 내 행성은 그리드가 확장되지 않을 때 계속 확장되므로 각 행성도 확장되는 것을 막을 것입니다. 이것은 좀 더 번거롭지만 인스펙터를 열고 화면을 666px x 666px로 조정하면 각 행성 위로 마우스를 가져가 픽셀 수를 볼 수 있습니다. 각 행성에 대해 min() 및 max() 함수 사용

.neptune {
   grid-row: 1/2;
   grid-column: 1/17;
   height: min(3vmin, 20px);
   width: min(3vmin, 20px);
   margin-top: max(-1.5vmin, -10px);
}

나는 그들이 캡을 넘어 확장되지 않도록 할 수 있으며 그리드가 확장을 멈추더라도 마진이 그들을 외부 공간으로 밀어내지 않을 것입니다.



거기는! CSS 그리드 또는 그 과정에서 다른 트릭에 대해 배울 수 있기를 바랍니다.

코드가 궁금하시다면
https://github.com/JDHofmann/css-grids-solar-system