为什么我的CSS网格创建四列而不是一列？

时间：2020-05-26 04:22:53

标签： css

我的标准页面可以完全按照我的要求工作。我想在屏幕宽度小于813px时创建一个单独的列，但改为四个cols。我已经阅读了大量的帖子，并且挠头了两个小时。

#page-container {
    position:relative;
    min-height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "header header"
        "comp-desc comp-desc"
        "profile-one desc-one"
        "desc-two profile-two"
        "footer footer";

    justify-content: space-between;
    justify-content: space-around;
    justify-content: center;
    grid-row-gap: 2rem;
}

@media only screen and (max-width: 812px) {
    #page-container {
        min-height:100vh;
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        grid-template-areas:
            "header"
            "comp-desc"
            "profile-one"
            "desc-one"
            "profile-two"
            "desc-two"
            "footer";

        justify-content: space-between;
        justify-content: space-around;
        justify-content: center;
        grid-row-gap: 2rem;
    }
}

#profile-one {
    grid-area: profile-one;
    grid-column: 1;
}

#one-desc {
    grid-area: desc-one;
    grid-column: 2/5;
}

#profile-two {
    grid-area: profile-two;
    grid-column: 2/5;
    margin-bottom: 3rem;
}

#two-desc {
    grid-area: desc-two;
    grid-column: 1;
}

此处的图片- https://ibb.co/Pc7CvMQ https://ibb.co/1mgZGJh

代码-https://codepen.io/CSJC/pen/XWmQPYa

我缺少明显的东西吗？我还在学习，所以这可能是一个简单的错误。

2 个答案:

答案 0 :(得分：2)

如果您遵循移动第一方法，那么对您来说将非常容易，

我建议您先在移动设备上创建此样式，然后使用@media(min-width: 812px)将设计应用于桌面中的媒体查询，如果屏幕大于812，则媒体查询中的最小宽度选择器将运行，或者您可以使用显示像这样阻止您当前的媒体查询，

 body{
	font-family:'Sen', sans-serif;
	transition:transform .2s;
	background-color:#171d22;
	min-height: 100vh;
}

a:focus {
	outline:none;
}

button:focus {
	outline:none;
}

h4 {
	color:white;
}

header {
	grid-area: header;
	grid-area: header;
    position: sticky;
    top: 0;
}

#page-container {
	position:relative;
	min-height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-template-areas:
		"header header"
		"comp-desc comp-desc"
		"profile-one desc-one"
		"desc-two profile-two"
		"footer footer";
	justify-content: space-between;
	justify-content: space-around;
	justify-content: center;
	grid-row-gap: 2rem;
}

@media only screen and (max-width: 812px) {
	#page-container {
		min-height:100vh;
		width:100%;
		display:block;
		grid-template-columns:1fr;
		grid-template-areas:
			"header"
			"comp-desc"
			"profile-one"
			"desc-one"
			"profile-two"
			"desc-two"
			"footer";

		justify-content: space-between;
		justify-content: space-around;
		justify-content: center;
		grid-row-gap: 2rem;
	}
}

.navbar.navbar-expand-lg.navbar-light {
	/*position:fixed;*/
	width:100%;
	min-height:10vh;
	background-color:white;
	border-bottom: solid 1px black;
}

#logo {
	height:8vh;
	width:auto;
}

#nav-item:active {
	outline:0;
	border:none;
}

#nav-link:active {
	outline:0;
	border:none;
}

.dropdown-item:hover {
	background-color: #f8f9fa;
}

#head {
	text-align:center;
	background-color:#171d22;
	color:white;
	padding:10vh 0px 0px 0px;
	margin-bottom:2rem;
}

.comp-desc {
	margin-top: 10vh;
	grid-area: comp-desc;
	text-align:center;
	background-color:#171d22;
	color:white;
	font-size:1.25rem;
	margin:2rem 2.5% 3rem 2.5%;
}

.comp-desc p {
	padding:0.5rem 0px;
}

.profile {
	margin:5%;
	display:grid;
	background-color:#171d22;
	color:white;
	justify-content:center;
	justify-content:space-between;
	justify-content:space-around;
	align-items:center;
	margin-bottom:1.5rem;
}

#profile-one {
	grid-area: profile-one;
	grid-column: 1;
}

#one-desc {
	grid-area: desc-one;
	grid-column: 2/5;
}

#profile-two {
	grid-area: profile-two;
	grid-column: 2/5;
	margin-bottom: 3rem;
}

#two-desc {
	grid-area: desc-two;
	grid-column: 1;
}

.description {
	text-align:center;
	align-self:center;
	font-size:1.25rem;
	color:white;
	overflow:auto;
	margin:0px 5%;
	padding: 2rem 3rem;
}

#profile-img-boundaries{
	overflow:hidden;
}

#profile-img-F {
	width: 100%;
	height:auto;
	object-fit:contain;
	overflow:hidden;
	align-self:center;
}

#profile-img-M {
	width: 100%;
	height:auto;
	object-fit:contain;
	border-width:auto;
	overflow:hidden;
}

.profile-desc {
	overflow:hidden;
	margin: 5%;
}

.headers {
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-content:center;
	align-items:center;
	padding-top:10px;
}

.headers:hover {
	background-color: #000000;
}

.nametag {
	color:white;
	width:33%;
	padding:0px;
	margin:0px;
}

.btn.btn-dark {
	background-color:#171d22;
}

.modal-button {
	border:none;
	padding:0px;
	margin:0px;
}

.modal-footer {
	display:grid;
	grid-template-columns:1fr 1fr;	
}

.modal-link {
	color:rgb(244,212,69);
}

.modal-link img {
	height:100px;
	width:45%;
}

#footer {
	grid-area: footer;

	background-color:#ffffff;
	left:0;
	bottom:0;
	width:100%;
	min-height:10vh;
	color:#171d22;
	text-align:center;
	display:inline-flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	justify-content:space-between;
}

.foot-img {
	width:auto;
	height:8vh;
	display:flex;
	justify-content:space-between;
}

.foot-img:hover{
	transform:scale(1.1);
}

#spacer {
	/*keep for spacing*/
	height:8vh;
	width:auto;
}

#links {
	/*keep for spacing*/
}

#license-logo {
	height:8vh;
	width:auto;
	/* create right margin as vh for equidistance*/
	margin-right:2vh;
}
<div id="page-container">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light">
                <div class="d-flex flex-grow-1">
                    <span class="w-100 d-lg-none d-block">
                        <!-- hidden spacer to center brand on mobile --></span>
                    <a class="navbar-brand" href="index.html">
                        <img src="images/logo_blackWhite.png" id="logo">
                    </a>
                    <div class="w-100 text-right">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    </div>
                </div>
                <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
                    <ul class="navbar-nav ml-auto flex-nowrap">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html" tabindex="-1" aria-disabled="true">
                                <span class="dropdown-item">Home</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="portfolio.html" tabindex="-1" aria-disabled="true">
                                <span class="dropdown-item">Portfolio</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html" tabindex="-1" aria-disabled="true">
                                <span class="dropdown-item">Contact</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <div class="comp-desc">
            <h1 id="head">Meet the people behind anonymous anonymous</h1>
            <p>
                Lorem ipsum.
            </p>
            <p>
                Lorem ipsum.
            </p>
        </div>
        <div class="profile-desc profile" id="profile-one" type="button" data-toggle="modal" data-target="#about_anonymous" class="modal-button">
            <div id="profile-img-boundaries">
                <img src="images/anonymous.jpg" id="profile-img-F">
            </div>
            <div class="headers">
                <h3 class="nametag">
                    anonymous
                </h3>
                <h4>
                    Graphic Design & Video
                </h4>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="about_anonymous" tabindex="-1" role="dialog" aria-labelledby="about_anonymous" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="about_anonymous" style="color:rgb(244,212,69);">
                                Contact anonymous
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-footer">
                            <a href="https://uk.linkedin.com/in/anonymousanonymousanonymous" target="_blank">
                                <button type="button" class="btn btn-dark modal-link">
                                    <img src="images/li_white.png">
                                </button>
                            </a>
                            <a href="https://twitter.com/anonymousanonymous23" target="_blank">
                                <button type="button" class="btn btn-dark modal-link">
                                    <img src="images/tw_white.png">
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end modal -->
        </div>
        <div class="description" id="one-desc">
            <p>Lorem ipsum.</p>
        </div>
        <div class="profile-desc profile" id="profile-two" type="button" data-toggle="modal" data-target="#about_anonymous" class="modal-button">
            <div id="profile-img-boundaries">
                <img src="images/anonymous.jpg" id="profile-img-M">
            </div>
            <div class="headers">
                <h3 class="nametag">
                    anonymous
                </h3>
                <h4>
                    Graphic Design & Illustration
                </h4>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="about_anonymous" tabindex="-1" role="dialog" aria-labelledby="about_anonymous" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" style="color: rgb(244,212,69);">
                                Contact anonymous
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-footer">
                            <a href="#" target="_blank">
                                <button type="button" class="btn btn-dark modal-link">
                                    <img src="images/li_white.png">
                                </button>
                            </a>
                            <a href="#" target="_blank">
                                <button type="button" class="btn btn-dark modal-link">
                                    <img src="images/tw_white.png">
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End modal -->
        </div>
        <div class="description" id="two-desc">
            <p>Lorem ipsum.</p>
        </div>
        <footer id="footer">
            <!-- spacer -->
            <img src="images/logo_spacer.png" id="license-logo">
            <div id="links">
                <!-- Linkedin -->
                <a href="https://uk.linkedin.com/in/anonymousanonymousanonymous" target="_blank"><img src="images/li.png" class="foot-img"></a>
                <!-- Twitter -->
                <a href="https://twitter.com/anonymousanonymous23" target="_blank"><img src="images/tw.png" class="foot-img"></a>
                <!-- Insta -->
                <a href="https://www.instagram.com/anonymous" target="_blank"><img src="images/ig.png" class="foot-img"></a>
            </div>
            <a class="navbar-brand" href="index.html">
                <img src="images/logo_blackWhite.png" id="license-logo">
            </a>
        </footer>
    </div>

也不要在页眉或正文开头使用您的脚本，这是一种不良做法，并且会妨碍页面性能，请在正文底部使用所有脚本。

答案 1 :(得分：1)

取消设置#one-desc和#profile-two的网格列，然后它将为812px以下的设备屏幕宽度显示1列。请确保将媒体查询设置放在常规CSS选择器设置之后。

@media only screen and (max-width: 812px) {
    #page-container {
        min-height:100vh;
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        grid-template-areas:
            "header"
            "comp-desc"
            "profile-one"
            "desc-one"
            "profile-two"
            "desc-two"
            "footer";

        justify-content: space-between;
        justify-content: space-around;
        justify-content: center;
        grid-row-gap: 2rem;
    }

  #one-desc {
    grid-column: unset; /* Unset the grid column */
  }

  #profile-two {
    grid-column: unset; /* unset the grid column */
  }
}
相关问题
最新问题