如何使用CSS制作回應式網格-有解無憂

我想為這樣的非營利組織制作一個網格 - image。這是我的純HTML 和 CSS。但是邊距不一樣，回應模式也不行。另外，我認為我的代碼不正確。我已經花了 2 天時間制作了一個像該影像這樣的完美網格。

如何修復布局、邊距填充、回應性等？這個網格的正確 CSS是什么？

謝謝。

body {
                color: #000;
                font-family: 'Source Sans Pro', sans-serif;
            }

            h1, h2, h3, h4, h5, h6, p {
                font-family: 'Source Sans Pro', sans-serif;
            }

            .focus_area {
                width: 100%;
                display: inline-block;
            }

            .focus {
                width: 33.33%;
                float: left;
                position: relative;
                padding: 2px;
            }

            .focus:last-child {
                margin-top: -118px;
            }

            .focus_text {
                width: 66.66%;
                margin-top: 248px;
                height: 248px;
                padding: 36px;
                background: rgb(156, 166, 104);
                color: #fff;
            }

            .focus_text h2 {
                text-align: center;
                text-transform: uppercase;
            }

            .focus img {            }

            .focus p {
                position: absolute;
                bottom: 0;
                left: 20px;
                color: #fff;
                text-shadow: 0 0 black;
                font-size: 22px;
            }

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link href="https://fonts.googleapis.com/css2?family=Source Sans Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div class="container py-5">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">Some Title</h2>
                    </div>
                </div>
            </div>
    
            <div class="container">
                <div class="focus_area">
                    <div class="focus">
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                        <p>Cities & Shelters</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                        <p>Education & Training</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                        <p>Food & Water</p>
                    </div>
                    <div class="focus_text">
                        <h2>Delivering Humanitarian Relief Throughout The World</h2>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                        <p>Energy & Environment</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                        <p>Jobs & Business</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                        <p>Health & Fitness</p>
                    </div>
                </div>
            </div>
    
            <div class="container py-5">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">Some Title</h2>
                    </div>
                </div>
            </div>
        </body>
    </html>

uj5u.com熱心網友回復：

這是一個開始，您必須自己添加資料和影像，但可以輕松更改以適合您的確切需求。

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center;
}

main {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  height: 80vmin;
  width: 80vmin;
}

div {
  background-color: lightgrey;
}


/* top right */

div:nth-child(3) {
  background-color: #f77;
  grid-row: span 2;
}


/* middle */

div:nth-child(4) {
  background-color: #7e7;
  grid-column: span 2;
  grid-row: span 2;
}


/* bottom right */

div:nth-child(5) {
  background-color: #f77;
  grid-row: span 2;
}

@media screen and (max-width: 800px) {
  main {
    grid-template-columns: 1fr 1fr;
    height: 95%;
    width: 95%;
  }
  div:nth-child(3),
  div:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

uj5u.com熱心網友回復：

我使用grid和flexcss 屬性做了一個解決方案；這樣我就設法實作了您想要創建的布局。

[已編輯：我不知道發布鏈接不符合指南，抱歉 :(]

無論如何，我在這里發布了一段關于我如何設法創建布局的代碼片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Source Sans Pro:wght@200;300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <style>
      body {
        color: #000;
        font-family: 'Source Sans Pro', sans-serif;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        font-family: 'Source Sans Pro', sans-serif;
      }

      .focus_area {
        width: 100%;
        /* display: inline-block; */
      }

      .focus {
        /* width: 33.33%; */
        float: left;
        position: relative;
        padding: 2px;
      }

      .focus:last-child {
        /* margin-top: -118px; */
      }

      .focus_text {
        width: 100%;
        /* margin-top: 248px; */
        /* height: 248px; */
        padding: 30px;
        background: rgb(156, 166, 104);
        color: #fff;
      }

      .focus_text h2 {
        text-align: center;
        text-transform: uppercase;
      }

      .focus img {
      }

      .focus p {
        position: relative;
        bottom: 65px;
        left: 10px;
        color: #fff;
        text-shadow: 0 0 black;
        font-size: 22px;
      }

      .grid {
        display: grid;
        flex: 0 1 65%;
        grid-template-rows: repeat(3, minmax(33.3%, 33.3%));
      }

      /* Grid block that goes from column 1 to column 3
         and from row 2 to row 3 */
      .grid-block-1-3 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
      }

      .grid-block-1-2 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-2-3 {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-3-4 {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
      }

      .grid-block-1-3-row {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
      }

      .img-height {
        height: 100%;
        background-size: contain;
      }

      .flex-layout {
        display: flex;
      }

      .second-grid {
        display: grid;
        flex: 0 1 35%;
      }
    </style>
  </head>

  <body>
    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Some Title</h2>
        </div>
      </div>
    </div>

    <div class="container flex-layout">
      <div class="focus_area grid">
        <div class="focus">
          <img
            src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Cities & Shelters</p>
        </div>
        <div class="focus">
          <img
            src="https://i.ibb.co/VCbRdbx/education-and-training.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Education & Training</p>
        </div>

        <div class="focus_text grid-block-1-3">
          <h2>Delivering Humanitarian Relief Throughout The World</h2>
        </div>
        <div class="focus grid-block-1-2">
          <img
            src="https://i.ibb.co/0BT5vp5/energy-and-environment.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Energy & Environment</p>
        </div>
        <div class="focus grid-block-2-3">
          <img
            src="https://i.ibb.co/bWpystL/jobs-and-business.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Jobs & Business</p>
        </div>
      </div>
      <div class="second-grid">
        <div class="focus grid-block-1-3-row">
          <img
            src="https://i.ibb.co/3NSF6hj/food-and-water.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Food & Water</p>
        </div>
        <div class="focus grid-block-3-4">
          <img
            src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png"
            alt=""
            class="img-fluid img-height"
          />
          <p>Health & Fitness</p>
        </div>
      </div>
    </div>

    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Some Title</h2>
        </div>
      </div>
    </div>
  </body>
</html>

uj5u.com熱心網友回復：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link href="https://fonts.googleapis.com/css2?family=Source Sans Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    
            <style>
                body {
                    color: #000;
                    font-family: 'Source Sans Pro', sans-serif;
                    line-height: 1.1;
                }
                .card_text {
                    height: 270px;
                    background: rgb(156, 166, 104);
                    color: #fff;
                    text-align: center;
                    text-transform: uppercase;
                    padding: 100px;
                }
                h1, h2, h3, h4, h5, h6, p {
                    font-family: 'Source Sans Pro', sans-serif;
                }
    
                .bolBlock p {
                    left: 20px;
                    color: #fff;
                    text-shadow: 0 0 black;
                    font-size: 22px;
                    margin-top: -40px;
                }
                .container {
                    display: flex;
                }
                .row {
                    --bs-gutter-x: 0;
                    display: flex;
                }
                .bolBlock {
                    padding: 1px !important;
                }

            </style>
        </head>
    
        <body>
            <h2 class="text-center">Some Title</h2>
            <div class="container">
                    <div class="row col-8">
                        <div class="bolBlock col-6">
                            <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                            <p>Cities & Shelters</p>
                        </div>
                        <div class="bolBlock col-6">
                            <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                            <p>Education & Training</p>
                        </div>
                        <div class="card_text col-12">
                            <h2>Delivering Humanitarian Relief Throughout The World</h2>
                        </div>
                        <div class="bolBlock col-6">
                            <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                            <p>Energy & Environment</p>
                        </div>
                        <div class="bolBlock col-6">
                            <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                            <p>Jobs & Business</p>
                        </div>
                        
                    </div>
                    <div class="col-4">
                    <div class="bolBlock">
                        <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                        <p>Food & Water</p>
                    </div>
                    <div class="bolBlock">
                        <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                        <p>Health & Fitness</p>
                    </div>
                    
                </div> 
               
            </div>
    
        </body>
    </html>

uj5u.com熱心網友回復：

您可以查看解決方案。使用了 flexbox，至于回應能力，只有文本大小會影響，所以相應地調整文本大小。另請注意，出于樣式目的，我在標記中添加了一些更改。讓我知道它是否回答了您的問題。

/* style.css */
body {
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'Source Sans Pro', sans-serif;
}

.focus_area {
    width: 100%;
    display: flex;
    justify-content: center;
}

.focus_area .left {
    display: flex;
    flex-direction: column;
    max-width: 66.66666%;
    justify-content: space-between;
}

.focus_area .right {
    display: flex;
    flex-wrap: wrap;
    max-width: 33.33333%;
}

.left-top, .left-bottom {
    display: flex;
}

.left .focus {
    flex: 50%;
}

.focus_text {
    background: rgb(156, 166, 104);
    color: #fff;
    flex: 2;
    display: flex;
    margin: 2px;
}

.focus_text h2 {
    text-align: center;
    text-transform: uppercase;
    align-items: center;
    margin: auto;
    font-size: 16px;
}

.focus {
    position: relative;
    padding: 2px;
}

.right .focus img {
    max-width: 100%;
    height: auto;
}

.left .focus img {  
    max-width: 100%;
    height: auto;
}

.focus p {
    color: #fff;
    text-shadow: 0 0 black;
    font-size: 22px;
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
    font-size: 14px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Source Sans Pro:wght@200;300;400;700&display=swap" rel="stylesheet" />
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="focus_area">
            <div class="left">
                <div class="left-top">
                    <div class="focus">
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt="" class="img-fluid" />
                        <p>Cities & Shelters</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt="" class="img-fluid" />
                        <p>Education & Training</p>
                    </div>
                </div>
                
                <div class="focus_text">
                    <h2>Delivering Humanitarian Relief Throughout The World</h2>
                </div>

                <div class="left-bottom">
                    <div class="focus">
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt="" class="img-fluid" />
                        <p>Energy & Environment</p>
                    </div>
                    <div class="focus">
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt="" class="img-fluid" />
                        <p>Jobs & Business</p>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="focus">
                    <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt="" class="img-fluid" />
                    <p>Health & Fitness</p>
                </div>
                <div class="focus">
                    <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt="" class="img-fluid" />
                    <p>Food & Water</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Some Title</h2>
            </div>
        </div>
    </div>




    
</body>
</html>

uj5u.com熱心網友回復：

您可以使用 CSS Grid 輕松獲得所需的內容：

        <div class="container">
            <div class="c1">1</div>
            <div class="c2">2</div>
            <div class="c3">3</div>
            <div class="c4">4</div>
            <div class="c5">5</div>
            <div class="c6">6</div>
            <div class="c7">7</div>
        </div>

.container {
    height: 100%;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.c1, .c2,.c6,.c7 {
    grid-row: span 2;
}

.c3,.c5 {
     grid-row: span 3;
}

.c4 {
     grid-row: span 2;
     grid-column: span 2;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496898.html

標籤：html css

上一篇：html內的回應式2列網格

下一篇：箭頭驗證超過10個欄位