CSS Grid minmax

Question

Cześć, nie mogę sobie poradzić z tym bym miał te dwie kolumny nieregularne, np. obrazek jako 1/3 i test jako 2/3.

Aktualnie kod działa mi o tyle fajnie, że gdy zmniejszam okno i kolumna ma mniej niż 400px to treść wskakuje pod zdjęcie i mam to czego chciałem. Brakuje mi tylko tego, jak podzielić to kolumny nie 50/50. Ktoś wie jak to zrobic ?

 

    <div class="content">
        <img src="3688760.jpg">
        <div class="content-text">
            <h2>Nagłówek</h2>
            <p>Lorem, ipsum do ptate possimus laboriosam ad</p>
            <div class="button">
                <button>Zobacz</button>
            </div>
        </div>
    </div>

.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    max-width: 1200px;
    margin: 0 auto;
    grid-gap: 20px;
}

 img {
    width: 100%;
    object-fit: cover;
    object-position: center;

}

.content-text {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

 

Answer 1

Wykorzystaj sobie do tego grid template area 

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Comments

Ok ale robiąc to za pomocą areas muszę i tak robić media queries by zmieniać układ, a w tym przypadku tylko raz definiuje szerokość kolumny i sama się pięknie zwija...

---

no dobra nie do końca rozumiem w takim razie co chcesz zrobić, a czemu nie użyjesz po prostu width: xx% ?