?? ? ??? ??? ?? ?? ??? ?? ?? ?????. ?? 960px ??? ?? ? ??? ????? 12 ? ???? ???? ?? ??? ?? ??????. ??? ??? ??? ?? ??? ????? ?? ??? ????? ??? ? ? ??? ?? ??? ??? ??????.

???? ????? ??????.<fieldset></fieldset> a<legend></legend> . ? ? ????? ??? ?????. ???? ???? ??? CSS ?? ??? ??? ???? ? ?? ?? ??? ?? ? ??? ?????.

 .Accessibility-tools fieldset {
  ?? : 48%;
  ??? : ??;
  ?? ??? : 1%;
}

/* ???? */
@Media ?? ?? ? (Max-Width : 480px) {
  .Accessibility-tools fieldset {
    ?? : 100%;
  }
}

??? ?? ????? ?? ???? ??????. ??? ??? ???? ?? ? ?? ?? ?? CSS ???? ??? ?? ? ? ???,? ???? ???? ???? ?? ???? ??? "?? ??"? ?????.

 /* ???? */
@Media ?? ?? ? (Max-Width : 480px) {
  ?? {
    ?? : 160px;
  }
  ?? {
    ?? : 130px;
  }
}

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

1. ?? ??? ??
2. ?? ??
3. ?? ??

Heydon Pickering? "Flexbox Holy Albatross"? ??? ??? ??? ??? ?? ??? ???? ?? ??? ?????. ??? ??? ? ?? ?????<fieldset></fieldset> ? ?? ??? ? ?? ? ?? ?? ?? ?? ?????.

Flexbox ? ??? : ?? ??

flex-wrap: wrap Property? ?? Flexbox? ?? ? ???? ???? ??? ?? ?? ?? ? ????. ??? ??? ?? ??? ???? min-width ??? ?????.

???? ??? ?? ??? CSS ???? ??? ????? ?? ?? ????? auto-fit ? auto-fill ??? ( repeat() ?)? ?????. auto-fit ???? ??? ?????.

 .wrapper-- ???-? {
  ????? : ???;
  ???-???-?? : ?? (?? ??, 450px);
  ??? ? : 10px;
}

??? ??? ??? ???? ?? ? ?? ??? ??? ? ????. fr ?? ?? minmax() ? ???? ??? ??? ??? ?? ??? ????? ??? ????? ?? ??? ? ??? ???? ???? ??? ??? ?????.

?? ??? ???

CSS ??? ?? 2? subgrid ???? ?? ???? ????? ?? ??? ?? ? ? ??????. ??? ??? ? ?? ???? ??? ?????. ?? ???? ???? ?? ???? ??? ?? ???? ???? ?? ? ? ????.

?? ??? ??, ?? ???? auto-fill ? minmax() ???? ?????.

 .wrapper-- ???-? {
  ????? : ???;
  ???-???-?? : ?? (?? ?, minmax (150px, 1fr));
  ??? ? : 10px;
}

?? ???? subgrid ???? ??? ? ??? ??????.

 .sub-grid {
  ????? : ???;
  ???-?? : ?? 3;
  ???-???-?? : ?? ???;
  ?? ?? : ??;
}

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

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

?? ??? ???? ??? ?? ???? ???? (?? Firefox). CSS ?? ??? ?? ????? ??? ?? ? ? ????. ??? ???? ?? ??? Caniuse.com? ??????. ? ??? ?? ?? ???? Miriam Suzanne, Rachel Andrew ? Heydon Pickering (?? ??? ??? ??)? ??? ?????. ? ??, ??? ? Flexbox? ??? ??? ????? ?? ?? ??? ??? ??? ? ????. FieldSet? display ????? ???? ?? contents ?? ??? ? ????.

? ??? ?? ?? ?? (?????, ?? ???!)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!