How to make a responsive grid with CSS-CodePudding

I want to make a grid for a non-profit organization like this - image. Here is my pure - HTML & CSS. But margin padding isn't the same, and responsive mode isn't okay. Also, I think my code isn't right. I've spent already 2 days making a perfect grid like that image.

How I can fix layout, margin padding, responsiveness, etc? What is the right CSS for this grid?

Thanks.

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 >
                <div >
                    <div >
                        <h2 >Some Title</h2>
                    </div>
                </div>
            </div>
    
            <div >
                <div >
                    <div >
                        <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt=""  />
                        <p>Cities & Shelters</p>
                    </div>
                    <div >
                        <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt=""  />
                        <p>Education & Training</p>
                    </div>
                    <div >
                        <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt=""  />
                        <p>Food & Water</p>
                    </div>
                    <div >
                        <h2>Delivering Humanitarian Relief Throughout The World</h2>
                    </div>
                    <div >
                        <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt=""  />
                        <p>Energy & Environment</p>
                    </div>
                    <div >
                        <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt=""  />
                        <p>Jobs & Business</p>
                    </div>
                    <div >
                        <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt=""  />
                        <p>Health & Fitness</p>
                    </div>
                </div>
            </div>
    
            <div >
                <div >
                    <div >
                        <h2 >Some Title</h2>
                    </div>
                </div>
            </div>
        </body>
    </html>

CodePudding user response：

Here is a start, you would have to add data and images yourself, but it can be easily changed to fit your exact needs.

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>

CodePudding user response：

I made a solution using grid and flex css properties; that way I managed to realize the layout you wanted to create.

[Edited: I didn't know posting links don't fit the guidelines, sorry :(]

Anyway, I post here a snippet code on how I managed to create the layout:

<!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 >
      <div >
        <div >
          <h2 >Some Title</h2>
        </div>
      </div>
    </div>

    <div >
      <div >
        <div >
          <img
            src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png"
            alt=""
            
          />
          <p>Cities & Shelters</p>
        </div>
        <div >
          <img
            src="https://i.ibb.co/VCbRdbx/education-and-training.png"
            alt=""
            
          />
          <p>Education & Training</p>
        </div>

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

    <div >
      <div >
        <div >
          <h2 >Some Title</h2>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

<!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 >Some Title</h2>
            <div >
                    <div >
                        <div >
                            <img src="https://i.ibb.co/wdRy4Wv/cities-and-shelter.png" alt=""  />
                            <p>Cities & Shelters</p>
                        </div>
                        <div >
                            <img src="https://i.ibb.co/VCbRdbx/education-and-training.png" alt=""  />
                            <p>Education & Training</p>
                        </div>
                        <div >
                            <h2>Delivering Humanitarian Relief Throughout The World</h2>
                        </div>
                        <div >
                            <img src="https://i.ibb.co/0BT5vp5/energy-and-environment.png" alt=""  />
                            <p>Energy & Environment</p>
                        </div>
                        <div >
                            <img src="https://i.ibb.co/bWpystL/jobs-and-business.png" alt=""  />
                            <p>Jobs & Business</p>
                        </div>
                        
                    </div>
                    <div >
                    <div >
                        <img src="https://i.ibb.co/3NSF6hj/food-and-water.png" alt=""  />
                        <p>Food & Water</p>
                    </div>
                    <div >
                        <img src="https://i.ibb.co/XX9Y7yH/health-and-fitness.png" alt=""  />
                        <p>Health & Fitness</p>
                    </div>
                    
                </div> 
               
            </div>
    
        </body>
    </html>

CodePudding user response：

You can check out the solution. Used flexbox and as for the responsiveness, only the text size will affect, so adjust the text size accordingly. Also to note that I added some changes in the markup for the style purposes. Let me know if it answered your question.

/* 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 >
        <div >
            <div >
                <h2 >Some Title</h2>
            </div>
        </div>
    </div>

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

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

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

    <div >
        <div >
            <div >
                <h2 >Some Title</h2>
            </div>
        </div>
    </div>




    
</body>
</html>

CodePudding user response：

you can easily get what you want by using CSS Grid :

        <div >
            <div >1</div>
            <div >2</div>
            <div >3</div>
            <div >4</div>
            <div >5</div>
            <div >6</div>
            <div >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;
}