繰り返すぞCSS【Day77 of 100】

インライン要素とブロック要素

インライン要素（一行の中の文字系）だとmarginトップやボトムがうまく効かないから文字系は上下に余白を付けたかったらブロック要素に変換する

footer small {
  display: block;
  /* justify-content: center; */
  padding-top: 10px;
}

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/ecsite/index.html

体が覚えるまでやろうじゃないかCSS

レスポンシブにしようと思うと諸々ハードルが上がるね。スマホ用

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

@media (max-width: 750px) {
  form.search {
    display: none;
  }
  .goods ul {
    margin-top: 10px;
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(2, 1fr);
    /* width: 80%; */
    gap: 20px;
  }
}

今回も重要なのはこことここね。

列をブロック的に配置するにはgrid

    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: repeat(2, 1fr);

https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/ecsite/index.html

以上、きょうもありゃっした！