I am working with grid, and for some reason, using max-width in the media query seems to do nothing. code below:
Code:
body {
color: #fff;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}
#media only screen and (max-width:700px) {
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header' 'block_1' 'block_2'
}
}
#content>* {
background-color: #fff;
border: 1px solid black;
}
.header {
grid-area: header;
height: 150px;
}
.block_1 {
grid-area: block_1;
height: 150px;
}
.block_2 {
grid-area: block_2;
height: 150px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="master.css">
</head>
<body>
<div id='content'>
<div class='header'>Header</div>
<div class='block_1'>Header</div>
<div class='block_2'>Header</div>
</div>
</body>
</html>
I expect the 2 block classes to stack on top of each other at 699px and below. However, they do not seem to want to do that.
You will also need to change grid-template-columns: repeat(1, 1fr); to make that grid take full width.
body {
color: #fff;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}
#media only screen and (max-width:700px) {
#content {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header' 'block_1' 'block_2'
}
}
#content>* {
background-color: #fff;
border: 1px solid black;
}
.header {
grid-area: header;
height: 150px;
}
.block_1 {
grid-area: block_1;
height: 150px;
}
.block_2 {
grid-area: block_2;
height: 150px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="master.css">
</head>
<body>
<div id='content'>
<div class='header'>Header</div>
<div class='block_1'>Header</div>
<div class='block_2'>Header</div>
</div>
</body>
</html>
Related
I try to make a page on CSS Grid with 100% heigth but hen I put an image in its container and I reduce the window, the content overflows vertically on my other container. It's only happened on a page based on 100vh.. I tried hard only with Grid proprieties but nothing works
Someone has a solution ?
My current code : https://jsfiddle.net/kxaobqcr/3/
HTML
<header>
<div class="type"> <h1>Title</h1> </div>
<div class="nav">
x
x
x
x
x
x
</div>
</header>
<section class="content">
<div class="library"> <img src="https://i.pinimg.com/originals/2d/8f/3e/2d8f3ef4a6bac30d0a4c7a44f7b3d574.jpg" alt="">
</div>
</section>
</body>
CSS
html,body {
margin: 0;
padding: 0;
height: 100%;
width: auto;
font-family: 'Libre Baskerville', serif;
}
body {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 10px 10px;
}
header {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-row: 1/ 3;
grid-column: 1/ 13;
grid-gap: 10px 10px;
background-color: grey;
}
.type {
display: grid;
grid-row: 1/ 2;
grid-column: 1/ 8;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-self: center;
background-color: lightcoral;
}
.nav {
display: grid;
grid-row: 2/ 3;
grid-column: 1/ 8;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr;
align-self: center;
background-color: crimson;
}
a {
color: black;
text-decoration: none;
padding: 10px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column: 1/ 13;
grid-row: 3 / 13;
grid-gap: 10px 10px;
}
.library {
grid-column: 4/ 10;
grid-row: 4 / 10;
justify-self: center;
align-self: center;
}
I am still learning Grid Layout, some advices for minimize my CSS code would be welcomed :-)
I try to make this view as simple as I can
This is a link of jsfiddle, have a look: https://jsfiddle.net/dupinderdhiman/zum2kxpw/5/
a{
padding: 10px;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
<div class="col-12">
<div class="nav">
x
x
x
x
x
x
</div>
</div>
</div>
<div class="row">
<div class='col-12 mt-1'>
<img src="https://i.pinimg.com/originals/2d/8f/3e/2d8f3ef4a6bac30d0a4c7a44f7b3d574.jpg" alt="">
</div>
</div>
</div>
I found a solution. Delete align-items on css code and the overflow problem disappears. To center the image just use margin: auto.
New code : https://jsfiddle.net/k1fmodv5/
CSS
html,body {
margin: 0;
padding: 0;
height: 100%;
width: auto;
font-family: 'Libre Baskerville', serif;
}
body {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 10px 10px;
}
header {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-row: 1/ 3;
grid-column: 1/ 13;
grid-gap: 10px 10px;
background-color: grey;
}
.type {
display: grid;
grid-row: 1/ 2;
grid-column: 1/ 8;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-self: center;
background-color: lightcoral;
min-height: 0;
}
.nav {
display: grid;
grid-row: 2/ 3;
grid-column: 1/ 8;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr;
align-self: center;
background-color: crimson;
}
a {
color: black;
text-decoration: none;
padding: 10px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column: 1/ 13;
grid-row: 3 / 13;
grid-gap: 10px 10px;
}
.library {
grid-column: 4/ 10;
grid-row: 4 / 10;
margin:auto;
}
Thank you all for your help !
I created a text and made a boundary around it. Later, I specified the dimensions of the box according to my needs. When I increased the size of the text, it extended outside the box. I even wrote 'text-align:center;' in it's CSS part. Still it is not giving any result.
I've tried text-align:center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: white;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
height: 130px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1>
<f style="font-family:'Abril Fatface'">BITS</f>
<g style="font-family:'Antic Didone'">Hack</g>
</h1>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
I expect the name BITSHack to be inside the boundry, but it is extending it.
Don't use height: 130px; inside name class.Try this code:
.name{
height: auto;
}
Don't use height at all, the default is set to auto. Also don't use f and g tags, use span. Yuo can wrap both spans with a div and then align the div to the center if you'll the give the container (.name in your case)
display: flex;
align-items: center;
justify-content: center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: green;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<div>
<span style="font-family:'Abril Fatface'">BITS</span>
<span style="font-family:'Antic Didone'">Hack</span>
</div>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
.cards
{
display:grid;
grid-template-row: 1fr 2fr 1fr;
margin-right:50px;
margin-left:50px;
grid-row-gap:20px;
}
.main
{
grid-row:2/3;
display:grid;
grid-template-row:1fr 1fr;
grid-row-gap:50px;
margin-top:80px;
}
.upper
{
grid-row:1/2;
display:grid;
grid-template-columns:1fr 2fr 1fr;
height:150px;
//height: auto;
grid-column-gap:10px;
}
.name
{
color:black;
border: solid 10px #00CED1;
border-radius:15px;
font-size:30px;
height:auto;
padding:5px;
margin-left:50px;
grid-column:1/3;
text-align:center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1><f style="font-family:'Abril
Fatface'">BITS</f><g style="font-
family:'Antic Didone'">Hack</g></h1>
</div>
<div class="year">
<h1 style="font-family:'Asap
Condensed'">2019</h1>
</div>
</div>
now try to execute it,your expected result will come.
Why doesnt the grid boxes size change depending on the font size because currently the text thats in the header and footer element is out of the box when i put font-size:25;?
do i need to put all of the elements into divs to do so? if you do seem to fix this for me please explain what you did to fix the issue. thank you
:root {
--light: #666666;
--dark: #000000;
}
body {
display: grid;
grid-template-areas:
"header header header"
"nav article article"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 60em;
margin: 0px;
padding: 5px 25px 5px 25px;
background-image: url(code.jpeg);
background-size: cover;
background-attachment: fixed;
}
header, footer, article, nav, div {
padding: 1.2em;
background: var(--light);
opacity: 0.85;
color:black;
border-radius: 1.2em;
}
#pageHeader {
grid-area: header;
text-align: center;
font-size: 24px;
}
#pageFooter {
grid-area: footer;
font-size: 25px;
text-align: center;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Clodio Pontes | CV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="pageHeader">
<h1>header</h1>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
</nav>
<footer id="pageFooter"><p>MADE BY</p>
</footer>
</body>
</html>
Simply because you used fixed value for header and footer thus you have overflow grid-template-rows: 80px 1fr 70px. Replace the fixed values with the minmax() function so the height will adjust if the content is bigger
:root {
--light: #666666;
--dark: #000000;
}
body {
display: grid;
grid-template-areas:
"header header header"
"nav article article"
"footer footer footer";
grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content);
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 60em;
margin: 0px;
padding: 5px 25px 5px 25px;
background-image: url(code.jpeg);
background-size: cover;
background-attachment: fixed;
}
header, footer, article, nav, div {
padding: 1.2em;
background: var(--light);
opacity: 0.85;
color:black;
border-radius: 1.2em;
}
#pageHeader {
grid-area: header;
text-align: center;
font-size: 24px;
}
#pageFooter {
grid-area: footer;
font-size: 25px;
text-align: center;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content) 1fr minmax(70px,max-content);
grid-template-columns: 1fr;
}
}
<header id="pageHeader">
<h1>header</h1>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
</nav>
<footer id="pageFooter">
<p>MADE BY</p>
</footer>
I have this simple grid div:
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
background-color: red;
}
#item5 {
background-color: aqua;
}
<div id="grid">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
</div>
Why are my items skipping the first column and are placed into the second one?
You have " " characters () before each of your inner <div> elements, which get interpreted as additional new lines, and interfere with your grid layout. Replacing these with regular spaces fixes the problem:
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
background-color: red;
}
#item5 {
background-color: aqua;
}
<div id="grid">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
</div>
I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax:
.grid {
background: gold;
height: 90vh;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
section {
background: red;
}
<div class="grid">
<section>
section1
</section>
<section>
section2
</section>
</div>
Apparently you need to explicitly set the location of each element of the grid, so for the example in the question, you'll need to do this:
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
section2
</section>
</div>
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
}
Doing it manually can be very tedious, but if you use grid-template-areas, autoprefixer will automatically render it for you.
So the final example looks like this:
.grid {
grid-template-areas: "s1 s2";
background: gold;
height: 500px;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
.grid .grid{
height: 300px;
}
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: s1;
}
.s1 .s1 {
background: teal;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: s2;
}
.s2 .s2 {
background: yellow;
}
section section {
background: green;
}
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
<div class="grid">
<section class="s1">
nested-section1
</section>
<section class="s2">
nested-section2
</section>
</div>
</section>
</div>