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>
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 !
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>
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.
How I can make the image to be centered vertically on the left and the text on the right ?
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
color: #444;
margin-top: 150px;
justify-content: center;
}
.pricing1box-div {
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<br>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
You can use grid properties on the image and text, as well. Just make the parent a grid container.
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
color: #444;
}
.pricing1box-div {
display: grid; /* new; nested grid container */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.pricing1box-div img {
grid-column: 1;
grid-row: 1 / -1; /* from first line at start, to first line at end */
align-self: center; /* vertical centering */
width: 100px;
}
.pricing1box-div :not(img) {
grid-column: 2;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
You can also mix flex & grid for readability
body {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
align-content: bottom;
}
div {
display:flex;
align-items: center; /* Vertical center of image & text */
background-color: orange;
}
p {
padding: 100px 10px; /* Demo stuff */
}
<div>
<img src="//placecage.com/100/100">
<p>text here</p>
</div>
Try this:
position: relative;
top: 50%;
transform: translateY(-50%);
or maybe you just need this: align="middle"
<img src="http://placehold.it/350x150.png" align="middle" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
I want to align some div's with same class name in a row using css grid layout. when i tried all div are aligned in top of another one. How to achieve this using css grid layout.
.front{
grid-area: front;
}
.accountcontainer{
display: grid;
margin: 0 10px;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"front front front front";
margin-bottom: 20px;
}
Don't use grid-area
Just specify the grid-row for that class.
Note the number of divs with that class MUST be the same as (or less than) the number of columns.
.container {
display: grid;
margin: 10px auto;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: rows;
margin-bottom: 20px;
border: 1px solid grey;
}
.item {
height: 60px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
color: whitesmoke;
border: 1px solid red;
}
.item.front {
background: rebeccapurple;
}
.front {
grid-row: 1;
}
<div class="container">
<div class="item front">1</div>
<div class="item front">2</div>
<div class="item"></div>
<div class="item front">3</div>
<div class="item front">4</div>
<div class="item"></div>
<div class="item"></div>
</div>