堆栈内存溢出
  繁体   English   中英

如何使用 CSS 制作响应式网格

[英]How to make a responsive grid with CSS

 原文  2022-06-28 06:47:09  5   5    html/ 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/bootstrap@5.0.2/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>

5 个解决方案

解决方案1
 0  2022-06-28 07:56:14

这是一个开始，您必须自己添加数据和图像，但可以轻松更改以适合您的确切需求。 

 /* These are just to make the demo look nice */ body { display: grid; height: 100vh; margin: 0; place-items: center; } main { height: 80vmin; width: 80vmin; } /* Actual code here */ main { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1fr; } 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>

解决方案2
 0  2022-06-28 08:37:40

我使用grid和flex css 属性做了一个解决方案； 这样我就设法实现了您想要创建的布局。

[已编辑：我不知道发布链接不符合指南，抱歉 :(]

无论如何，我在这里发布了一段关于我如何设法创建布局的代码片段： 

 <!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/bootstrap@5.0.2/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%; } @media only screen and (max-width: 480px) { .grid { display: flex; flex-flow: column; } .flex-layout { display: flex; flex-flow: column; } .focus { flex: 0 1 215px; } } </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>

解决方案3
 0  2022-06-28 08:56:49

 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; }
 <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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <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>

解决方案4
 0  2022-06-28 08:56:51

您可以查看解决方案。 使用了 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; } /* tablet styles */ @media screen and (max-width: 768px) and (min-width: 481px) { .focus_area { flex-direction: column; } .focus_area .left, .focus_area .right { max-width: 100%; } .focus_text { padding: 50px 0px; } .focus_area .right { flex-wrap: nowrap; } } /* end of tablet styles */ /* styles for mobile devices */ @media screen and (max-width: 480px) { .focus_area { flex-direction: column; } .focus_area .left, .focus_area .right { max-width: 100%; } .left-top, .left-bottom { display: block; } .focus_text { padding: 50px 0px; } } /* end of mobile styles */
 <!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>

解决方案5
 0  2022-06-28 09:38:56

您可以使用 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;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 制作响应式 CSS 网格 如何使 CSS 二维网格响应？ 如何在CSS中使用对角网格制作响应式菜单？ 如何在HTML / CSS中制作3列完全响应的图像网格？ 如何在顺风 css 中制作两个网格响应式布局 为响应式3列DIV网格进行CSS布局 为响应式 DIV 网格制作 CSS 布局 如何使用图像制作响应式网格 如何使ExtJS网格响应 如何制作交替响应网格？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM