10 ? ?, ?? ??? ???? ????? ??? CSS? ??? ??????. ?, ?? ????? ??? ?? ??? ???? ?? ?? ??? ? ??????. ??? ????? ?? CSS? ?? ??? ?? ????????.

? ??? 10 ? ?? ??? ??? ?? ??? ???? ??? ???? ?????. ?????, ??? ?? CSS ??? ??? ???? ?? ??? ???? ??? ?? ???, ? ???? ?? ???? ??? ? ?? ??? ?????.

??? CSS ???? ?? ? ???? ??? ?? ???? ??? ?? ?? ??? ??? ?????.

??

? ????? ?? ??? ??? ? ??? ??? ?? ????? ?? ??? ??? ???? ??? ??????????. ??? ??, ??? ???? ?? ? ?? ??? ?? ???? ??? ??? ???? ???, ?? ???? ?? ????? ???? ?????? ????. ??, ??? ?? (? ??? ??)? ???? ?? ????.

HTML ??? ??? ????.

<p></p>
<div class="grid--thumbs">
  <a href="http://www.miracleart.cn/link/19e321d9f307ccfc1c37106191cbbc74">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381745622040.jpg" class="lazy" alt="???? ?? ?? CSS ??? ??">
  </a>
  </div>
<p></p>

?? ? ???? ?? ?? ?? ?? CSS ?? ? ??????.

?????? ???

???? ?? ? ? ?? ????? ??? ???? ??? ??? ???? ?????.

?? ??? ??

? ??? ??? ?? ??? ???? ???? ???? ?? ?? ??? ? ? ?? ??? ? ?? ???? ??????.

 .Grid--- ?? {???? : ???; }
.grid-- {float : ??; }

?? ??? ?? ??? ??? ?????. ??? ??? ???? ?? ??? ???? ??? ????? ??????.

??? ??? ???? ????

??? ??? ? ?? ?????? ?????.

 .Grid--- ?? {text-align : center}
.grid-- thumbs a {display : inline-block}

??? ??? ??? ????.

? ?? ??? ?? ???? ???? ????.

?? ???? Codepen? ??? ?? CSS Autocomplete? ?? ??? ??? ?? ??? ?????? ???? text-align-last ?? ??? ?????.

????, text-align-last: left ?? ??? ???? ????.

? ???? ?? ??? ?? ??? ???? ?? ????? ???? ?? ?????. text-align: justified ?? text-align-last: left ????? ? ?? ??? ??????

??? ??? ????. ??? ?? ? ??? ??? ? ?? ? ??? ??? ?? ?? ???. ?? ???? ???? ?? ???? ?? ??????.

??? ?? 2 ? ?? ?? ????, 9 ??? ??? ?? ??? ???? ??? ?? ???? ?? ? ????.

???? Flexbox ?

???? ??? ??? Flexbox ???? ???? pseudo element ::after ? ???? flex: 1 ??? ?? ?? ??? ???? ????.

 .Grid--- ?? {
  ????? : Flex;
  ??? ? : ?;
  a, & :: ?? {flex : 1; }
  img {?? : ??; }
  & : {content : 'After'??; }
}

?? ???? ???? ??? ????? ?????. ?? ???? ??? ??? ????, pseudo elements ::after ?? ?? ???? ??? ? ?? ? ? ???????.

??? ???? ?? ??? ?? ?? ??? ??? ?? ??? ?? ????. ?, ??? ?? ?? ??? ??? ?????? ?, ?? ??? ... ?? ??? ??? ? ?? ????? ??? ????? ??? ????? ?????.

??? ?? ?????. ? ?? ???? ?? ??? ???? ??? ???? ??? ?? ? DIV? ? ???? ????.

???? ??? ???? ?? ??? ?? ?? ?? ??? ? ? ????? ?? ?? ??? ???? ???? ????? ?? ?? ? ???? ??? ?? ??? ??? ? ????. ?? ??? ?? ??? ??? ???? ?? ?? ?? ?? ???????.

? ?? ? ??? ????? ??? ???? ?? ?? ???? ???? ?? ??? ?????. ??? ??? 0?? ??? ????? ??? ????.

? ???? ????? ?? ? ? ???? ??? ?? ??? ??? ?? ????. ??? ? ??? ?? ??? ??? ??? ??? ??? ??? ?? ????.

??? ????

? ??? ??? ? ??? ????? ?? ???? ?????. ??? ??? ?? ? ?? ??? ?? ?? ? ?? ?? ?????, ??? ?? ???? ???? ???, ??? ? ??? ??? ??? ?? ?????.

??? ??? ?? ?? ?? CSS ?? ??? ???? ?? CSS ?? --n ? ???? ??? ??? ???? ?? ??????. ?? grid-template-columns ???? ? ???? ?? ?? ?????.

 $ W : 13EM;
$ H : 19EM;
$ F : $ H/$ W;
$ n : 7;
$ g : 1em;

-H : #{$ f*$ w};
????? : ???;
Grid-Template-Columns : repeat (var (-n, #{$ n}), var (-w, #{$ w});
??? ? : $ g;
??-?? : ??;

@for $ i 1 ~ $ n {
  @Media (max -width : ($ n - $ i 1)*$ w ($ n - $ i 2)*$ g) {
    - -n : #{$ n -$ i}
  }
}

?? ?? ??? ?? ???????? ????? ????? ?? ????? ??????. ??? ? ? ? ??? ??? ??? ????? ????. ??? ??? ??? ??? ?? ??? ??? ?? ???? ?? ??? ??? ?? ??? ??? ????? ????.

??? ???

CSS ???? ??? ? ? ?? ???? ??? repeat() ??? ?? ???? ???? ?? ??? ???? ?????. MDN ? ???? ???? ???? ?? MDN ? ???? ?????? ?? ?? ?????, auto-fit ???? ?? ???? ??? ???? ???? ?? ??? ??? ? ??? ??? ??? ??? ?? ?? ?? ???? ??? ?????.

??? ?? ?? ????.

 .Grid--- ?? {
  ????? : ???;
  ??? ??? : ??;
  ??? ? : .25EM;
  ???-???-?? : ?? (?? ??, 8em);
}

?? ??? ??? ?? ??? ???? minmax() ??? ?????. ?? ??? minmax() ???? ??? ??? ??? ? ?? - ?? ?????? ? ?? ???? ???. ???? ???? ???? ??? ?? ??? ?? ??? ?? ??? ??? ??? ???.

 ???-???-?? : ?? (?? ??, minmax (8em, 1fr));

??? ??? ? ??? ? ?? ?? ?? ??? ???? ?? ? ???? ???? ?? ???? ????. ?? 8EM? min(8em, 100%) ? ?????? ?? ? ? ????. ?? ????? ???? 100%? ???? ??? 8em ???? ?????. ??? ??????!

min() ??? ?? ?? ?????? ???? ????!

??? ?? ???? ??? ??? (???? ???? ???? ???? ??)? ?? ?? ?? ??? ?? ? ????. ?? ??? Sony Ericsson W800i ??? ?????? ?? ??? ???? ??? ?? ??? ??? ? ???? ????? ????. ??? ???? ?? ???? ???? ???? ? ?? ????.

?? ??? ??? ??? ?? ??? ??? ? ???, ?? ???? ?????? ... ??? cover ??? object-fit ???? ??? ??? ?????!

? ?? ????? ? ?? ???? ?? ??? ?? ???? ??? ??? ??? ????. ??? ??? ???? ???? ??? ?? ?? ?? ???? ????. ??? ???? ???? . grid-column-end -1? ??? ? ????!

 .Grid--- ?? {
  / * ??? ??? ??? */
  A : ?? {
    ??? -?? : 1/ -1;
    img {?? : 13em}
  }
}

? ?? ??? ??? ?? ??? ???? ???.

?? ???? ??? ?? ??? ?? ?? ????? ????, ??? ??? -2 ??? ????? ... ?? ? ???? ?????!

auto-fill MDN?? ?? ?? ? ?? ??? ?? ??????. ? ? ???? ?? ??? ?? ???? ??? ??? ???? ??? ??? ?? ?????. ? ?? ?? ?? ??? ???? auto-fit auto-fill ???? ??? ????. ??? ??? ??? ??? ??? ??? ??? ?????, ??? ???? ??? ????? ?? ????.

??? ??? ?? ??? ???? ??? ?????? ??? ?? ?? ?? ??? ? ????. ?? ? ? (? : 8em) ?? minmax() auto-fill auto-fit ? ???? ??, ? ?? ??? ? ??? ??? ?? ?? ??? ?? ??? ? ?? ?? ????.

?? ????? ?? ???? ?? ?? ??? ???? ?????? ?????. ?? ??? ???? ?? ???? ?? ?? ? ? ?? ??? (??? 15em ?? min(100%, 15em) ?????. ?????, ??? ???? ??? ????, ?? ???? ? ??? ?? ??? ? ?? ???.

auto-fill ? ??? ??? ???? ??? ?? ??? ??? auto-fit ???? ????. ??? ??? ?? ? ???? ?? ??? ? ???? ???? ? ?? ??? ?? ??? ??? ??? ???? ????.

??? ?? ??? ??? auto-fit ? auto-fill ??? ?? ?? ??? ?????. justify-content ?? ???? ??? ?? ?? ??? ? ????.

?? ?? ? ?? ???? ? ??????. ?? ??? ???? ??? ?? ??? ?????. justify-content: center ? ???? auto-fill ? ??? ? ???? ???? ??? auto-fit ? ?? ?? ??? ?? ? ????.

? ??? ???? ?? ?? CSS ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!