WEB01 - CSS-grid & flex

Grid och flex

Grid

Om du vill styra layouten på din sida mer med passare och linjal och få saker att lägga sig i fina boxar så kan du använda dig utav CSS-kommandonen: display: grid; och display: flex;. Jämfört med kommandot float så håller sig elementet på sin plats och kastas inte runt. Elementet stör inte heller andra element runtomkring.

Texten och bilden här nedanför är uppstyrda med följande CSS-kod:

#grid-exempel{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    border: solid;
    border-width: 2px;
}
#exempelbild{
    width: 100%;
}

Och följande html-kod:

<div class="grid-exempel">

    <p>
        Lorem ipsum...
    </p>

    <figure>
        <img class="exempelbild" 
            src="https://www.ironmaiden.com/media/gallery/tallinn-im--55059.jpg"
            alt="Bruce Dickinson slåss med Eddie."/>
    </figure>

    <p>
        Lorem ipsum...
    </p>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet nisi quis nibh pulvinar tempus. Aenean pellentesque pellentesque finibus. Praesent a neque aliquam, pulvinar tortor sed, ultricies felis. Nulla eu laoreet turpis. Aliquam porttitor justo at nisl congue elementum. Integer ullamcorper, enim quis convallis aliquet, felis est fermentum eros, ut tristique lectus tortor nec felis. Pellentesque consectetur mattis risus ac auctor. Cras nec nisi vitae tortor varius feugiat eget at nibh. Maecenas non est non mi mattis vulputate ut ut dui. Cras quis mi congue, consequat augue ut, iaculis ex. Phasellus nisi lectus, euismod vel iaculis at, scelerisque eu urna.

Två saker som är värdefulla att lägga märke till är att border läger sig runt hela elementet. Samt att bilden håller koll på sin bredd i förhållande till utrymmet som uppstår.

För att få grid; att fungera så är det två kommandon som är viktiga:

display: grid;: grid är ett alternativ till inline och block
grid-template-columns: aa bb cc dd ...;: Den vänstra biten berättar att vi ska styra nätets kolumner; Den högra delen beskriver varje kolumns bredd

Slå samman kolumner eller rader

När du gör ett rutnät kan du styra vad som ska ligga i vilken kolumn med kommandot: grid-column: XX, och i vilken rad med kommandot: grid-row: XX;. Om du vill att ett element ska sträcka sig över flera kolumner skriver du: grid-column: start/slut+1;.

Exempel

<div class="grid-exempel">
    <p id="grid-exempel-kolumn-1a">
        Lorem ipsum...
    </p>

    <figure id="grid-exempel-kolumn-2a">
        <img class="exempelbild" 
            src="https://www.ironmaiden.com/media/gallery/tallinn-im--55059.jpg"
            alt="Bruce Dickinson slåss med Eddie."/>
    </figure>

.grid-exempel{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    border: solid;
    border-width: 2px;
}
#grid-exempel-kolumn-1a{
    grid-column: 1;
}
#grid-exempel-kolumn-2a{
    grid-column: 2/4;
}
.exempelbild{
    width: 100%;
}

<div class="grid-exempel">
    <p id="grid-exempel-kolumn-1b">
        Lorem ipsum...
    </p>

    <figure id="grid-exempel-kolumn-2b">
        <img class="exempelbild" 
            src="https://www.ironmaiden.com/media/gallery/tallinn-im--55059.jpg"
            alt="Bruce Dickinson slåss med Eddie."/>
    </figure>

.grid-exempel{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    border: solid;
    border-width: 2px;
}
#grid-exempel-kolumn-1b{
    grid-column: 1/3;
}
#grid-exempel-kolumn-2b{
    grid-column: 3;
}
.exempelbild{
    width: 100%;
}

Flex

Sätta i en rad

När man vill styra hur elementen i en kolumn (eller rad) ska bete sig kan man använda sig utav flex. Att styra hur ett element med flex kan vara besvärligt, men ger ett väldigt tillfredställande resultat. Ett exempel på element som är "flexade" på den här sidan är navigeringen. Både den i toppen och den på sidan.

Följande boxar är flexade så att de ska ta lika mycket plats på sidan:

Kod till exemplet ovan:

<div id="flexempel1">
    <div class="flexempel-box">1</div>
    <div class="flexempel-box">2</div>
    <div class="flexempel-box">3</div>
    <div class="flexempel-box">4</div>
    <div class="flexempel-box">5</div>
</div>

#flexempel1{
    display: flex;
    flex-direction: row;
}
.flexempel-box{
    border: 1px solid black;
    margin: 1px;
    padding: 10px;
}

Vi kan utveckla det här mer till:

Det är typ samma kod men vi har lagt till raden flex: 1; i flexempel-box:

.flexempel-box2{
    border: 1px solid black;
    margin: 1px;
    padding: 10px;
    flex: 1;
}

En cool sak är att man kan ändra ordningen på lådorna:

Med en liten förändring får vi:

#flexempel4{
    display: flex;
    flex-direction: row-reverse;
}

Lägg märke till att den blir högerjusterad också.

Sätta i en kolumn

Vi kan också flexa våra element i en kolumn — som i vänsterlisten — genom att ändra på flex-direction: till column;

Det är samma HTML-kod som ovan men en liten skillnad i CSS-kod:

#flexempel3{
    display: flex;
    flex-direction: column;
}

Vi kan så klart också vända ordningen på kolumner också:

#flexempel5{
    display: flex;
    flex-direction: column-reverse;
}

Den här sidans layout

HTML-koden

<!DOCTYPE html>

<html>

    <head>
        <!-- Här är all head-kod -->
    </head>

    <body>

        <header>

            <div>
                <!-- Här ligger loggorna och rubriken -->
            </div>

            <nav>
                <!-- Navigeringen till övriga sidor -->
            </nav>

        </header>

        <aside>

            <nav>
                <!-- Länkar till ställen på sidan -->
            </nav>

            <section>
                <!-- Sammanfattningen -->
            </section>

            <section>
                <!-- Kommandon -->
            </section>

        </aside>

        <main>

            <article>

                <!-- Delen om grid -->

                <section>

                </section>

                <section>

                </section>

            </article>

            <article>

                <!-- Delen om flex -->

                <section>

                </section>

            </article>

            <article>

                <!-- Delen som beskriver den här sidan -->

                <section>

                </section>

                <section>

                </section>

            </article>

            <article>

                <!-- Övningarna -->

            </article>

        </main>

        <footer>

        </footer>

    </body>

</html>

Som du kan se så är <header>, <aside>, <main> och <footer> på samma nivå. (Du kan också se värdet av att ha en konsekvent indragning (indentering)). Något som däremot kan kännas jobbigt är mängden av <article> och <section>. Men det här är en ganska så lång sida med mycket innehåll. Man kan lite förenklat tänka att varje rubrik ska ha sin egen <article> eller <section>.

CSS-koden

body{
    display: grid;
    grid-template-rows: auto auto auto; /* Jag har tre rader på sidan */
    grid-template-columns: 0.3fr 1fr; /* Jag har två kolumner på sidan */

    row-gap: 5px; /* Ett litet avstånd mellan raderna */
    column-gap: 5px; /* Ett litet avstånd mellan kolumnerna */
}

header{
    grid-column: 1/3; /* Detta gör att headern sträcker sig över två kolumner */
    grid-row: 1; /* Vilken rad den ska vara på */
}

header div{
    display: grid;
    grid-template-columns: 25% 50% 25%; /* I deadern har jag ett nytt grid 
    för att placera loggorna och rubriken */

    align-items: center; /* Centrerar elementen i sina kolumner */
}

header nav{
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex; /* Detta gör att jag får dem fina jämnbreda lådorna */  
}

header nav button{
    flex-direction: row; /* Detta är standard */
    flex: 1; /* ??? */  
}

aside{
    grid-column: 1; /* Anger vilken kolumn den ska ligga i */
    grid-row: 2; /* Anger vilken rad den ska ligga i */
}

aside nav{
    position: sticky; /* Detta gör att länkarna följer med snyggt */ 
    top: 10px; /* Avstånd från toppen när länkerna följer med */
    
    display: flex; /* Gör lådor */
    flex-direction: column; /* Gör att länkarna ligger i en kolumn */
}

main{
    grid-column: 2; /* Anger vilken kolumn den ska ligga i */
    grid-row: 2; /* Anger vilken rad den ska ligga i */
}

footer{
    grid-row: 3; /* Anger vilken rad den ska ligga i */
    grid-column: 1/3; /* Gör så att den sträcker sig över båda kolumnerna */

    display: grid; /* Här har jag ett nytt rutnät */
    grid-template-columns: 25% 50% 25%; /* Lägger innehåller rätt */
}

När du kollar på den här koden så kan du lägga märke till att jag har inga klasser eller id:n. Istället styr jag vad som ska hända helt genom att hålla noga koll på hur jag använder mina standardelement. (Jag har klasser och id:n inuti koden sen för att detaljstyra saker som ligger i själva texten). För att undvika klasser och id:n har jag skrivit på sättet:

aside nav{
    position: sticky;
}

Det här gör att webbläsaren förstår att bara <nav>-element som ligger i <aside>-element ska följa just de här reglerna.

Övningar

Utgå från filen "flex-och-grid.html" på Classroom.

Länkarna uppe i navigeringen ska styras upp med flex
Lägg navigeringen i en kolumn till vänster, och resten av innehållet i en kolumn till höger.
Den högra kolumnen ska delas upp i två kolumner (så att vi totalt har tre kolumner på sidan.)
- Ändra bredden på alla <p>-element till 100%.
Rubriken, "Advent of Code", och de två styckena endanför ska sträcka sig över båda de två kolumnerna.