CSS_part2.12 auto-fit auto-fill反作用式設計

28708 ワード
CSS テキストリンク

auto-fit auto-fill



特定の数値を書くよりもcolumnを作成する役割を果たしています.私たちが持っているwidthと同じ空白空間に、対応する(空)rowルールが自動的に埋め込まれます.columnがあるのでできるだけ多く!これはauto-fillです.

Autofitは、残りの空間に要素を追加し、適切に位置合わせします.

これを反応型のデザインに応用すればいいです.
Autofitは柔軟なサイズに適しています.
Autofillは正確な寸法に使用されます.
これが反応型設計の基本です.

ノマは反応型設計に挑戦



Autofitはminmaxと一緒に使いましょうか?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
   @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');   
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500&family=Bebas+Neue&family=Black+Han+Sans&family=Do+Hyeon&family=Ubuntu+Mono:ital@1&display=swap');
    </style>
  </head>
  <body>
    

    <div class="grid">
      <div class="header">My favorite Movies</div>
      <div class="line1">

      <div><span>TITLE: COCO<br> 보고 안울면 사람이 아니다..리멤벌..미...</span></div>
      
      <div><img src="https://mblogthumb-phinf.pstatic.net/MjAxODAxMTRfMTU1/MDAxNTE1OTI4MDg1NTk3.Tp4ENyWTJJsWp6Oq4enILlCLe4OK8x9Ekb1AVP0K4oog.711JDDepkM2KYx72wIeS_gFpp6P33UqhQPsbokPjUgQg.JPEG.dcc04134/coco_ver15_xlg.jpg?type=w800"/></div>

      
      <div><span><b>TITLE:Inception</b><br> 기억에서 잊혀질 때 쯤 다시 봐야지! 최애</span></div>
      <div><img src=      "https://blog.kakaocdn.net/dn/b9DzWV/btqBYvqsc0I/HlpgHdF0smqsx4TLcmKdzk/img.jpg"/></div>

      <div><span><b>Title:Mssion impossible5</b><br>개인적으로 시즌5가 명작이다..</span></div>

      <div><img src="https://img.hankyung.com/photo/201506/BF.10165593.1.jpg"/></div>
      </div>

      
      <div class="line2">      
      <div><img src="https://blog.kakaocdn.net/dn/Gz1wC/btqAjWRlfKz/I6KULAb7voIP7piTeSe6yK/img.jpg"/></div>
      <div><span><b>Title:Knives Out</b><br>추리 영화중에 젤 잘 만든듯. 안지루함<span></div>
      <div><img src="https://upload.wikimedia.org/wikipedia/ko/6/6f/%ED%8A%B8%EB%A3%A8%EB%A8%BC_%EC%87%BC_%ED%8F%AC%EC%8A%A4%ED%84%B0.jpg"/></div>
      <div><span><b>Title:TRUMAN SHOW</b><br>인간은 신의 창조물, 우리는 트루먼이다. <br>객관화 하며 자주적으로 살자<span></div>
            <div><img src="http://t1.daumcdn.net/cfile/12474B4B503DAD2C1E"/></div>
      <div><span><b>Title:INSIDIOUS</b><br>잔인한 장면 하나도 없는데도 인생 공포영화</span></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
.grid{
  display:grid;
  grid-template-rows: 15vh repeat(2, minmax(10px,40vh));
  border: 1px solid black;
}
.header{
display: flex;
align-items:center;
justify-content: center;
font-family: 'Bebas Neue', cursive;
font-size:  10vmin;
font-weight: 600;
background-color:black;
color:red;
}

.line1{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(1px,1fr)); 
  grid-template-rows: 100%;
}

.line2{
      display:grid;
    grid-template-columns: repeat(auto-fit, minmax(10px,1fr)); 
  grid-template-rows: 100%;
}


img{
  width:100%;
  height:100%;
}



.line1 div, .line2 div{
display: flex;
align-items:flex-end;
text-align: right;
font-size: 2vmax;
font-family: 'Do Hyeon', sans-serif;
}

.line1 div:nth-child(1){
  color:yellow;
  background-color:rgb(93, 14, 172);
}

.line1 div:nth-child(3){
  color:rgb(180, 185, 255);
  background-color:rgb(9, 17, 129);
}


.line1 div:nth-child(5){
  color:rgb(61, 61, 255);
  background-color:rgb(255, 218, 55);
}

.line2 div:nth-child(2){
  color:rgb(53, 32, 18);
  background-color:rgb(255, 159, 15)
}

.line2 div:nth-child(4){
      color:rgb(255, 244, 148);
  background-color:rgb(168, 6, 33);

}

.line2 div:nth-child(6){
      color:rgb(232, 255, 141);
  background-color:rgb(25, 104, 61);
}
テキストはfont-size:2 vmaxです.ページサイズに合わせて拡大・縮小します.
[プログラマ]レポート結果の取得(Java)
ユーティリティを用いたラピッドプロトタイピング