CSS grid layout problems
Question
So I am new to CSS grid. I have designed a layout for the web page for this example. I have labelled out how the page should be i,e cols & rows and their numbers. (image here https://postimg.cc/PPxDXKsx )
Even with this I still struggling to get CSS grid to layout correctly.
I have attached the HMTL CSS boiler plate of how my page is structured (without the content for now)
A lot of research on how CSS grid works. Within each section I have tried to color code the background of each div so a can visualise each sections layout. As well as using Firefox dev tools the grid systems will still not go how I want it.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<header class= "header">
<!-- Nav Bar-->
</header>
<div class= "container page-grid"> <!-- Main CSS grid-->
<!-- Mini nav bar under main one-->
<section>
<div class="new-in-section">
<ul>
<li><a href="#">NEW IN</a></li>
<li><a href="#">JACKETS</a></li>
<li><a href="#">WAISTCOATS</a></li>
<li><a href="#">FORMAL COATS</a></li>
<li><a href="#">TROUSERS</a></li>
<li><a href="#">SUITS</a></li>
<li><a href="#">CLEARANCE</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
</section>
<!-- Main product section-->
<section>
<div class="mens-tweed-product">
</div>
</section>
<!-- Garment care section-->
<section>
<div class="garment-care-section">
</div>
</section>
<!--Complete the outfit section -->
<section>
<div class="complete-outfit-section">
</div>
</section>
<!--Recently viewed section -->
<section>
<div class="recent-viewed-section">
</div>
</section>
</div> <!-- Main CSS grid-->
</body>
<!-- Main CSS grid-->
.page-grid {
display: grid;
grid-template-columns: 1fr , repeat (2 1fr); /* Two columns */
grid-template-rows: 1fr, repeat (8 1fr); /* eight rows */
grid-gap: 25px 25px; /* Short hand for both col and row */
grid-gap: 25px 25px; /* Short hand for both col and row */
margin:0px;
padding:10px;
}
/* Style for "New Nav In Section" */
.new-in-section{
width: 1250px;
height: 20px;
background-color:lightblue;
background-color:none;
grid-column-start: 1;
grid-column-end: 1 ;
grid-row-start:1;
grid-row-end:1;
}
.mens-tweed-product {
height:1180px;
height:575px;
background-color:lightgreen;
grid-column-start: 1;
grid-column-start: 3;
grid-row-start: 2;
grid-row-end: 4;
}
.garment-care-section{
width: 1180px;
height: 345px;
background-color:lightcoral;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
grid-row-end: 7;
}
1 answers
solution1
0 2019-07-06 15:12:17
You have a few problems here that I can see:
Grid Syntax
Your syntax for the grid in .page-grid is wrong, and so no grid is even registering.
/* formerly 1fr, repeat (2 1fr) should be: */
grid-template-columns: repeat(2, 1fr);
I'd recommend taking another look at MDN's CSS repeat() docs and then giving it another go.
Conflicting properties in a single rule
CSS will take whatever you put last if I recall. So, in .mens-tweed-product when you put grid-column-start as both 1 and 3 , browsers will render that as grid-column-start: 3; .
Grid applies only to direct children
As you have it now, only the <section> s are actually part of your grid. So when you try to style the .mens-tweed-product with grid-column-start , grid-column-end , and so forth they won't have any effect.
You might try Nested Grids as Mozilla summarizes here. There's also an emerging subgrid property which will do what you want (I think), but it's not well-supported yet so you should just keep it on your radar for now.
Missing negative sign, maybe?
I think in the .new-in-section you may be trying to use the grid-column-end: -1; to say, "Cover the full row." Fix your sign and you'll get what you want there.
If that's not what you were trying, try it! And learn more about negative grid lines in the docs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.