CSS Grid Layout выглядит грязно с низким разрешением - PullRequest
Новая
       38

CSS Grid Layout выглядит грязно с низким разрешением

0 голосов
/ 03 октября 2019

Я играю с CSS Grid и у меня проблема с макетом.

Макет выглядит хорошо, когда разрешение превышает ширину 1500 пикселей. Но если вы уменьшите браузер, то все будет грязно. Как я могу сделать это более быстро? Например, между divs есть пробел, но для более низкого разрешения разрыв не уменьшается автоматически.

Stackblitz:

https://stackblitz.com/edit/angular6-material-components-demo-8usvcm?embed=1&file=src/app/app.component.scss

SCSS: 

.home-card {
    max-width: 1500px;
    margin: auto;
    margin-top: 100px;
    padding: 0;

     .home-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .mat-card-image {
        vertical-align: bottom;
        margin: 0;
        width: 100%;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .content {
        padding: 40px;
        max-height: 500px;

        &-container {
        display: grid;
        grid-template-rows: repeat(5, 1fr);
        }

        &-logo-insig {
            img {
                width: 250px;
            }
        }

        &-title {
            width: 100%;
            font-size: 20px;
            font-family: "Arial Black"
        }

        &-description {
            width: 100%;
            font-size: 20px;
            color: gray;
        }

        &-buttons {
            width: 100%;

            .mat-raised-button {
                height: 50px;
                font-size: 15px;
            }
        }
    }
}

HTML: 

<mat-card class="home-card">
    <mat-card-content>
        <div class="home-container">
            <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg">
            <div class="content">            

                <div class="content-container">
                    <div class="content-logo-insig">
                        <img                src="https://static.dezeen.com/uploads/2019/04/ikea-logo-design-4-e1556179835436.jpg">
                    </div>
                    <div class="content-title">
                        <h1>Lorem ipsumdolor</h1>
                    </div>
                    <div class="content-description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing, <br />ased do                 eiusmod tempor incididunt asd.
                    </div>
                    <div></div>
                    <div class="content-buttons">
                        <button mat-raised-button>
                            <mat-icon>mail</mat-icon> Send message
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </mat-card-content>
</mat-card>
...