Odzivna mrežna postavitev elementov

Spoznajte moderne tehnike CSS-a za ustvarjanje prilagodljivih mrežnih postavitev. Ta primer prikazuje, kako lahko uporabimo Flexbox za postavitev elementov v več stolpčno mrežo, ki se samodejno prilagaja različnim velikostim zaslona. Elementi vključujejo besedilne sklope in slike, vsak s svojimi interaktivnimi učinki ob prehodu miške.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <section class="intro">
            <a href="javascript:void(0)" class="card">
                <span class="badge">Uvod</span>
                <h3>Prva sekcija</h3>
                <p>Odzivna postavitev s poudarkom na berljivosti in eleganci v ozkih iframe-ih in na velikih zaslonih.</p>
            </a>
            
            <a href="javascript:void(0)" class="card">
                <span class="badge">Postavitev</span>
                <h3>Druga sekcija</h3>
                <p>Hibrid grid + flex, mehke sence, tekoča tipografija ter dosledni razmiki za vrhunski videz.</p>
            </a>
        </section><br>
        
        <section class="grid grid-auto">
            <a href="javascript:void(0)" class="pic">
                <img src="/img/narava2.png" alt="Narava 1">
            </a>
            <a href="javascript:void(0)" class="pic">
                <img src="/img/narava5.png" alt="Narava 2">
            </a>
            <a href="javascript:void(0)" class="pic">
                <img src="/img/narava8.png" alt="Narava 3">
            </a>
        </section><br>
        
        <section class="row">
            <a href="javascript:void(0)" class="card">
                <h3>Tretja sekcija</h3>
                <p>Interakcije z nežnimi transformacijami in sencami, ki izboljšajo izkušnjo brez pretiravanja.</p>
            </a>
            
            <a href="javascript:void(0)" class="card">
                <h3>Četrta sekcija</h3>
                <p>Optimizirano za iframe polovico zaslona: hitro prelom v eno kolono, ko je prostor ožji.</p>
            </a>
            
            <a href="javascript:void(0)" class="card">
                <h3>Peta sekcija</h3>
                <p>Gradient ozadja, zaobljeni robovi in uravnoteženi razmiki ustvarijo sodoben, profesionalen videz.</p>
            </a>
        </section>
    </div>
</body>
</html>
                    

                        :root {
    --bg-grad-from: var(--bg);
    --bg-grad-to: var(--card);
    --card-bg: var(--card);
    --text: var(--fg);
    --text-soft: var(--muted);
    --accent: #3b82f6!important;
    --shadow-sm: var(--shadow);
    --shadow-md: var(--shadow-heavy);
    --radius: 16px;
    --radius-img: 14px;
    --gap: 16px;
    --gap-lg: 20px;
    --pad: 18px;
    --pad-lg: 22px;
    --maxw: 1200px;
}

* { 
    box-sizing: border-box; 
}

html,body { 
    height: 100%; 
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(12px, 2vw, 24px);
    display: grid;
    gap: clamp(var(--gap), 2vw, var(--gap-lg));
}

h3 {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.2vw + .85rem, 1.4rem);
    line-height: 1.2;
    color: var(--text);
    letter-spacing: 0.2px;
    -webkit-text-fill-color: var(--text);
}

p {
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(.95rem, .4vw + .8rem, 1rem);
    line-height: 1.6;
    -webkit-text-fill-color: var(--text);
}

.card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: clamp(var(--pad), 2vw, var(--pad-lg));
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(16,24,40,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(59,130,246,.25);
}

.pic {
    display: block;
    background: transparent;
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
    will-change: transform;
}

.pic:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.pic img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-img);
    transition: transform .45s ease;
}

.pic:hover img {
    transform: scale(1.035);
}

.grid {
    display: grid;
    gap: clamp(var(--gap), 2vw, var(--gap-lg));
}

.grid-auto {
    grid-template-columns: 1fr;
}

@media (min-width: 520px) {
    .grid-auto {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (min-width: 980px) {
    .grid-auto {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--gap), 2vw, var(--gap-lg));
}
.row > * {
    flex: 1 1 260px;
    min-width: 0;
}

.intro {
    display: grid;
    gap: clamp(var(--gap), 2vw, var(--gap-lg));
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 720px) {
    .intro {
        grid-template-columns: minmax(0, 28ch) minmax(0,1fr);
    }
}

.badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: #0b5ef0;
    background: rgba(59,130,246,.10);
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
    border: 1px solid rgba(59,130,246,.15);
    -webkit-text-fill-color: #0b5ef0;
}
                    

REZULTAT

Odzivna mrežna postavitev elementov

Vadnica.org

Povezave

Podpora