投稿記事

CSS Grid

23 Mar 2017

CSS Grid と flexbox で iOSの電卓画面を再現する記事を見つけました

電卓の機能はついていません

原文は こちらです

参照A Complete Guide to Grid

早々に試してみました

現在対応しているブラウザは Safari 10.1, Firefox 52, Opera 44, Chrome 57 です

htmlを用意する

  <div class="wrapper">
  <h1>0</h1>
  <div class="digits flex">
  <button>9</button>
  <button>8</button>
  <button>7</button>
  <button>6</button>
  <button>5</button>
  <button>4</button>
  <button>3</button>
  <button>2</button>
  <button>1</button>
  <button class="wide">0</button>
  <button>.</button>
 </div>
 <div class="modifiers subgrid">
  <button>AC</button>
  <button>+/-</button>
  <button>%</button>
 </div>
 <div class="operations subgrid">
  <button>/</button>
  <button>X</button>
  <button>-</button>
  <button>+</button>
  <button>=</button>
 </div>
</div>
戻る
最初のCSSを適用する
Reset

0

// CSS     
body { 
  font-family: sans-serif;
}  
.wrapper { 
  min-height: 65vh;
  /* viewport height の 65% */
}
h1 { 
  background-color: #111;
             color: white;
            margin: 0;
           padding: 1rem;
         font-size: 4rem;
}
button { 
  font-size: 2rem;
     border: 1px solid #111;
}
.modifiers button { 
  background-color: #ccc;
}
.operations button { 
  background-color: orange;
}
.digits button{ 
  background-color: #efefef;
}
// CSS     
.wrapper, .subgrid { 
  display: grid;
}

display: grid

要素をグリッドのコンテナとして定義し、グリッド・フォーマットを利用できるようにします

// CSS     
.wrapper  {
  grid-template-areas: "total total total total" 
                       "modif modif modif oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper";
} 
h1 {
  grid-area: total;                
}
.modifiers {
  grid-area: modif;
}
.operations {
  grid-area: oper;
}
.digits {
  grid-area: digit;
}
grid-template-areas

grid-area プロパティの値 (grid-area 名)をもとに gridの形を定義します</br> grid-area 名を繰り返すことで、それらのセルにまたがった内容を置くことができる</br> 6行4列のグリッドが構成されます

// CSS     
h1 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
display: flex;

要素を flexbox コンテナとして定義します

justify-content: flex-end;

横配置の場合、右揃えにする

align-items: flex-end;

横配置の場合、下揃えにする

// CSS     
.modifiers {
  grid-auto-flow: column;
}
grid-auto-flow: column;

グリッドの子要素の配置を明示しないときに、自動配置アルゴリズムでの配置方法を指定します</br> 置くことのできる列の要素に順番に配置していきます

// CSS     
.modifiers {
  grid-auto-columns: 1fr;
}
grid-auto-columns: 1fr;

自動で配置された列の長さを指定します</br> fr (fraction) 単位は、グリッドの空きスペースを分割した長さを表します</br> ここでは .modifiers の3列を3等分の長さに指定しています

// CSS     
.digits {
  display: flex;
}
// CSS     
.digits button {
  flex: 1 0 30%;
 /* flex-grow: 1; flex-shrink: 0; flex-basis: 30%; */
} 
// CSS     
.digits {
  flex-wrap: wrap;
}
flex-wrap: wrap;

子要素の折り返しを設定する

// CSS     
.digits {
  flex-direction: row-reverse;
}
flex-direction: row-reverse;

子要素の配置を行方向で右から左に設定する

// CSS     
.digits .wide {
  flex: 2 0 60%;
  /* flex-grow: 2; flex-shrink: 0; flex-basis: 60%; */
}
// CSS     
.digits .wide {
  order: 1;
}
order: 1;

表示順を指定します。1番目に指定しています。 あくまで見かけ上だけです。プログラミングの際は注意!

// CSS     
.wrapper {
  grid-auto-columns: 1fr;
}
// CSS     
body { 
  font-family: sans-serif;
}  

h1 { 
  background-color: #111;
            color: white;
           margin: 0;
          padding: 1rem;
        font-size: 4rem;
          display: flex;
   justify-content: flex-end;
      align-items: flex-end;
}

button { 
  font-size: 2rem;
     border: 1px solid #111;
}
.modifiers button { 
  background-color: #ccc;
}
.operations button { 
  background-color: orange;
}
.digits button{ 
  background-color: #efefef;
}
.wrapper, .subgrid { 
  display: grid;
}

.wrapper  {
          min-height: 65vh;
          /* viewport height の 65% */
  grid-template-areas: "total total total total" 
                       "modif modif modif oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper"
                       "digit digit digit oper";
    grid-auto-columns: 1fr;
} 

h1 {
  grid-area: total;                
}

.modifiers {
  grid-area: modif;
}
.operations {
  grid-area: oper;
}
.digits {
  grid-area: digit;
}

.modifiers {
     grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.digits {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.digits button {
  flex: 1 0 30%;
 /* flex-grow: 1; flex-shrink: 0; flex-basis: 30%; */
} 

.digits .wide {
   flex: 2 0 60%;
   /* flex-grow: 2; flex-shrink: 0; flex-basis: 60%; */
  order: 1;
}