“Pasaka” par CSS

Vai labāk izmantot “Floats” vai “Flexbox”, vai “Grid”? Tas ir atkarīgs no situācijas.

Vispār CSS ir viltīga valoda. Itkā viegli apgūstama programmēšanas valoda, bet tajā pašā laikā arī pietiekoši sarežģīta. Tā ir ļoti viegla, lai pats uzsāktu eksperimentēt ar dažādiem stila noteikumiem kā: background-color; border; font-size utt. Tomēr gana ātri CSS kļūst mulsinoša un sarežģīta. Tas notiek tad, kad sāk veidot lielākus projektus.

CSS priekš “layout” veidošanas

Senākos laikos programmētāji redzēja uz HTML tabulām veidotus “layout” kā vienīgo risinājumu. Mūsdienās šāds risinājums ir redzams tikai ļaunos murgos. Pirmais uzlabojums bija “Floats” izmantošana tabulu vietā:

<div id="mytable">
    <div class="left">kreisā kolona</div>
    <div class="right">labā kolona</div>
    <div class="clearer"></div>
</div>

<style>
   .left,.right {
      float:left;
      width:50%;
   }
   .clearer {
     clear:both;
     height:0;
   }
</style>

Var redzēt to, ka tiek izmantoti <div> elementi, tiem piešķir klases un tad pielieto float noteikumus.

Pamatā float tika radīts lai teksts piekārtotos blakus attēliem un tādās situācijās vajadzētu izmantot tieši float.

Flexbox bija pirmais reālais risinājums, lai veidotu kolonas vai rindas.

Saite uz rakstu CSS Flexbox

Saite uz rakstu Flexbox piemērs


Grid ir jaunākā un speciāli radīta iespēja tieši lai veidotu lapas izkārtojumu. Grid sistēmā ir viegli darboties divās dimensijās, respektīvi gan kolonās, gan rindās.

cssgridgarden.com

Grid 1. piemērs