My original code has 3 columns an 2 rows.
I want it to show 2 columns and 3 rows in the small screen.
But it not working.
.little_news {
display: grid;
margin:1em;
grid-template-columns: 10px 10px 10px;
grid-template-rows: 1fr 1fr;
grid-column-gap: 320px;
justify-content: center;
align-items: stretch;
justify-items: center;
align-content: center;
}
#media only screen and (max-width: 1200px) {.little_news {
display: grid;
margin: 1em;
grid-template-columns: 10px 10px;
grid-template-rows: 1fr 1fr;
grid-column-gap: 320px;
justify-content: center;
align-items: stretch;
justify-items: center;
align-content: center;}}
In the media query for 1200px, you have only specified 2 rows
To specify 3 rows try
grid-template-rows : 100px 100px 100px;
Related
enter image description here
I want to create an image gallery which sits just below a paragraph of text and is centred. My grid has meant that the rows are really far apart.
/* PP Gallery */
.ppgallery {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
margin-top: 500px;
margin-left: 80px;
margin-right: 80px;
}
img {
grid-column: span 2;
grid-row: span 4;
}
The grid-gap property defines the size of the gap between the rows and columns in a grid layout.Reduce value of grid-gap.
Also Reduce Margin-top in your CSS file.
/* PP Gallery */
.ppgallery {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px; /*Reduce Grid-gap value*/
margin-top: 100px; /*Reduce Margin-top*/
margin-left: 80px;
margin-right: 80px;
}
img {
grid-column: span 2;
grid-row: span 4;
}
I'm working on a personal project and I have a problem with overlapping when I resize the window.
Basically until now my page is divided in 3 sections, header (which is sticky), middle/hero and last section with the products.
The problem is when I make my page less higher, the images with the coffees are overlapping the text.
My code is here:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
height: calc(100vh - 64px);
width: calc(100vw - 64px);
justify-content: center;
}
.text-section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
font-size: 1.05em;
margin: 0 5vw 0 5vw;
padding: 0 2vw 0 2vw;
}
.text-section h2 {
font-size: 2em;
font-weight: 600;
padding-bottom: 1em;
}
/* <p> color */
.ph {
color: #3c4043;
}
.image-section {
display: flex;
align-items: center;
justify-content: center;
background-image: url(https://www.illy.com/dw/image/v2/BBDD_PRD/on/demandware.static/-/Sites-masterCatalog_illycaffe/default/dw9a7f00e7/products/Coffee/Coffee-Ground/9893ME_coffee_ground-espresso_can-classico-roast-250gr-zagnoli-decorated_illy-shop/DecoratoOZ_GroundClassico_800x800px.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
min-height: 15em;
margin: 2vw;
}
.main-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
justify-content:space-between;
}
.illy,
.lavazza,
.starbucks {
display: flex;
flex-direction: column;
align-items: center;
width: 15em;
height: 25em;
}
https://codepen.io/claudiuu/full/ZEWmRzR
here is the overlap
I am trying to make a border around the entire div of a CSS grid Item, rather than around the text itself.
CSS:
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
}
.bordered-grid-item {
border: 1px black dashed;
}
HTML:
<div class="grid-parent">
<div class="bordered-grid-item ">
Column 1
</div>
<div>
Column 1
</div>
</div>
FIDDLE:
https://jsfiddle.net/tpr4ydjx/7/
Make the item ocupy the whole space with width: 100%
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
}
.bordered-grid-item {
border: 1px black dashed;
width: 100%;
text-align: center;
}
<div class="grid-parent">
<div class="bordered-grid-item ">
Column 1
</div>
<div>
Column 1
</div>
</div>
It's either you add padding for your .bordered-grid-item like below
.bordered-grid-item {
border: 1px black dashed;
padding: 10px;
}
or the whole on .grid-parent
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
border: 1px black dashed;
padding: 10px;
align-items: center;
justify-items: center;
}
it depends on what you want.
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
align-items: center;
}
.grid-item {
text-align: center;
}
.grid-item.bordered {
border: 1px black dashed;
}
<div class="grid-parent">
<div class="grid-item bordered">
Column 1
</div>
<div class="grid-item">
Column 1
</div>
</div>
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 !
The problem I experience is best summarized with a picture and an explanation.
I am using CSS3 Grid and I have 4 columns in the same row, all containing a string of 4 digits as shown below.
The Problem is that I can't figure out a way to make sure the text of the first- and last column of the row is aligned to the edges while still keeping equal spacing between the content of all 4 columns:
I have tried centering the text, but this results in the card number not being aligned with the edges of the grid.
Relevant HTML (Angular)
<ng-container *ngFor="let section of _CardNumberSections">
<div class="card-number-section">
{{ section }}
</div>
</ng-container>
Relevant CSS
.credit-card{
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
-ms-grid-rows: auto 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
grid-row-gap: 5px;
width: 326px;
//height:204px;
padding:27px 27px 17px 27px;
border-radius: 6px;
background: #fff;
border: 1px solid #efefef;
box-shadow: 0px 2px 24px 0px rgba(0,0,0, 0.07);
box-sizing: border-box;
overflow: hidden;
.card-number-section{
-ms-grid-row: 3;
grid-row:3;
padding-bottom: 20px;
font-family: $family-open-sans;
font-size: 18px;
font-weight: 600;
color: #4a4a4a;
}
You can create empty columns to use as separators:
.credit-card {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
grid-template-areas: "a . b . c . d";
-ms-grid-rows: auto 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
grid-row-gap: 5px;
width: 326px;
//height:204px;
padding: 27px 27px 17px 27px;
border-radius: 6px;
background: #fff;
border: 1px solid #efefef;
box-sizing: border-box;
overflow: hidden;
background-color: lightgreen;
background-clip: content-box;
}
.card-number-section {
-ms-grid-row: 3;
grid-row: 3;
grid-area: a;
padding-bottom: 20px;
font-family: $family-open-sans;
font-size: 18px;
font-weight: 600;
background-color: wheat;
}
.card-number-section:nth-child(2) {
grid-area: b;
}
.card-number-section:nth-child(3) {
grid-area: c;
}
.card-number-section:nth-child(4) {
grid-area: d;
}
<div class="credit-card">
<div class="card-number-section">1111</div>
<div class="card-number-section">2222</div>
<div class="card-number-section">3333</div>
<div class="card-number-section">4444</div>
</div>
alternative snippet using columns:
.credit-card {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
-ms-grid-rows: auto 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
grid-row-gap: 5px;
width: 326px;
//height:204px;
padding: 27px 27px 17px 27px;
border-radius: 6px;
background: #fff;
border: 1px solid #efefef;
box-sizing: border-box;
overflow: hidden;
background-color: lightgreen;
background-clip: content-box;
}
.card-number-section {
-ms-grid-row: 3;
grid-row: 3;
grid-column: 1;
padding-bottom: 20px;
font-family: $family-open-sans;
font-size: 18px;
font-weight: 600;
background-color: wheat;
}
.card-number-section:nth-child(2) {
grid-column: 3;
}
.card-number-section:nth-child(3) {
grid-column: 5;
}
.card-number-section:nth-child(4) {
grid-column: 7;
}
<div class="credit-card">
<div class="card-number-section">1111</div>
<div class="card-number-section">2222</div>
<div class="card-number-section">3333</div>
<div class="card-number-section">4444</div>
</div>
You can align them horizontally (inline axis) with justify-self.
Codepen
.credit-card{
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
-ms-grid-rows: auto 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
grid-row-gap: 5px;
width: 326px;
padding:27px 27px 17px 27px;
border-radius: 6px;
background: lightsalmon;
border: 1px solid #efefef;
box-shadow: 0px 2px 24px 0px rgba(0,0,0, 0.07);
box-sizing: border-box;
overflow: hidden;
}
.card-number-section{
-ms-grid-row: 3;
grid-row:3;
justify-self: center; /* 2 and 3 */
padding-bottom: 20px;
font-family: $family-open-sans;
font-size: 18px;
font-weight: 600;
color: #4a4a4a;
}
.card-number-section:first-child {
justify-self: start; /* 1 */
background-color: lightgreen;
}
.card-number-section:last-child {
justify-self: end; /* 4 */
background-color: lightblue;
}
<div class="credit-card">
<div class="card-number-section">Left</div>
<div class="card-number-section">Center</div>
<div class="card-number-section">Center</div>
<div class="card-number-section">Right</div>
</div>