ildar-k
9/23/2018 - 12:10 PM

Materialize Grid

Materialize raamistik koosneb 12 tulbast, ning lõputust arvust ridadest. Paigutamaks elemente ühele reale, peavad need olema elemendis klassiga row. Selles reas saab määrata elemendi laiuse sõnaga col ning andes sellele vastava suuruse vastavalt ekraanisuurusele. Määramaks elemendi suurust väiksel ekraanil kasutad märki S ning tulpade arv ntks s12(võtab kogu laiuse). Keskmisel ekraanil kasutad märki M ning tulpade arv ntks 6, suurel ekraanil l ning ülisuurel ekraanil xl. Materialize gridi puhul tuleb lähtuda põhimõttest mobile first, sest selles järjekorras märgitakse grid'is tulpade arv, väiksemast suuremale. Kui elemendile on antud ainuke laius s4, siis on selle elemendi laius alates kõige väiksemast ekraanist lõpetades ülisuure ekraaniga sama s4.

grid.html
content_copyfile_download
<div class="container">
            <header>
                <div class="row">
                    <div class="col s12">
                        <h1>Grid</h1>
                    </div>
                </div>
            </header>
            <main>
                <div class="row">
                    <div class="col s12 m6">
                        <h2>content</h2>
                    </div>
                    <div class="col s12 m6">
                        <h2>content</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 m8">
                        <h2>Heading</h2>

                    </div>
                    <div class="col s12 m4">
                        <h2>sidebar</h2>
                        
                    </div>
                </div>
            </main>


        </div>