Как отцентровать блоки используя css grid

19.11.2020

Небольшая памятка о том, как используя css grid можно разместить несколько элементов по центру родительского блока.

pic1

pic1

Также стоит ознакомиться с записью css grid адаптивная верстка без медиа запросов

 
<div class="header__login">
    <a href="#">
        <i class="fas fa-user"></i> <span>Вход для клиентов</span>
    </a>
</div>

 
.header__login a {
    color: #066fa4;
    text-decoration: none;
    border: 1px solid #000;
    width: 100%;
    height: 100%;
    
    display: grid;
    grid-template-columns: 1fr 3fr;
    place-items: center;
}

.header__login i {
    color: #066fa4;
}

.header__login span {
    justify-self: left;
}


Категории: CSS, -Памятка-
Яндекс.Метрика