When you specify the image location in the CSS grid, the image does not fit into the specified location.

symptoms
When you specify the location of the image (image_0.svg) in the CSS grid, the image does not fit in the specified location.

Expectations
I want the image to fit in the position specified in grid-column:3/-3;grid-row:facebook-logo;.

Reproduction Steps
Execute the following code.By the way, I copy-coded Facebook's mobile login page.

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook-copy</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <header>
        <i class="fas fa-mobile-alt">/i>
        <div class="header-text">
            <p>Facebook for iPhone for fast browsing</p>
        </div>
    </header>

    <div class="main">

        <img class="facebook-logo-image" src="./image_0.svg" alt="facebook logo">

        <div class="login-form">
            <form action="#">
                <input type="email" name="mail">
                <input type="password" name="pw">
                <input type="submit" value="Login">
                <p> or </p>
                <a href="#">Forgotten Password </a>
                <hr>
                <button>Create a new account</button>
            </form>
        </div>

        <div class="under-login-form-text">
            <p>Create a Facebook page for celebrities, bands, and businesses<a href="#">
        </div>

    </div>

    <footer>

        <div class="language">
            <p>Japanese</p>
            <a href="#">English(US)</a>
            <a href="#">Portuguss (Brasil)</a>
            <a href="#"> Chinese text</a>
            <a href="#">Espaolol</a>
            <a href="#">Franaais (France)</a>
            <a href="#">Deutsch</a>
            <button>+</button>
        </div>

        <div class="footer-menu">
            <a href="#">About Facebook </a>
            <p> ·</p>
            <a href="#">Help</a>
            <p> ·</p>
            <a href="#"> Others </a>
        </div>

        <div class="copy-right">
            <small>Facebook Inc.</small>
        </div>

    </footer>
</body>
</html>

stylesheet.css

@charset "UTF-8";

/* Preferences*/

* {
    margin:0;
}

/* Page-wide Settings*/
body{
    display:grid;
    grid-template-columns —15px52px1fr52px15px;
    grid-template-rows: 
            [head] 45px
            [facebook-logo] 40px
            [login-form] 175px
            [or] 15px
            [create-new-account] 51px
            [forget-password] 27px
            [blank-middle] 35px
            [language] 85px
            [footer-menu] 11px
            [copy-right] 15px
            [blank-footer] 7px;
}

/* Header*/
header{
    grid-column: 2 of 2;
    grid-row:head;
}

/* Facebook Logo*/
.facebook-logo-img{
    grid-column —3 of -3;
    grid-row —facebook-logo;
    width —112px;
    height —39.42px;
    text-align:center;
}

I look forward to hearing from you.

add
The reason why some of the named lines specified in the grid-template-rows property do not exist in the CSS is because they are still in the process of writing the CSS.

css html5

2022-09-29 22:33

1 Answers

When I changed .facebook-logo-img in stylesheet.css to .facebook-logo-image, and made an img tag with the class name facebook-logo-image grid item, the image fits into the expected grid container.

Reference Links
Details the basics, key properties and terminology required to implement the CSS Grid

add

Below is the source code. index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook-copy</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <header>
        <i class="fas fa-mobile-alt">/i>
        <div class="header-text">
            <p>Facebook for iPhone for fast browsing</p>
        </div>
    </header>
    <img class="facebook-logo-image" src="./image_0.svg" alt="facebook logo">
</body>
</html>

stylesheet.css

@charset "UTF-8";

/* Preferences*/

* {
    margin:0;
}

/* Page-wide Settings*/
body{
    display:grid;
    grid-template-columns —15px52px1fr52px15px;
    grid-template-rows: 
            [head] 45px
            [facebook-logo] 40px

/* Header*/
header{
    grid-column: 2 of 2;
    grid-row:head;
}

/* Facebook Logo*/
.facebook-logo-image{
    grid-column —3 of -3;
    grid-row —facebook-logo;
    width —112px;
    height —39.42px;
    margin:0 auto;
}

2022-09-29 22:33

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656