It's a small problem but I don't get it. I am just trying to align the text in y-axis, but it only goes a little distance down when I put align-self : end or center. Container is the main grid, which contains the col div (columns) which has the con div (content) which contains the text inside the box div
CSS
.container{
display: grid;
grid-template-columns: repeat(4,22.45em);
grid-template-rows: 48rem;
grid-template-areas:
"colone coltwo colthr colfour";
/*text-align: center;*/
}
.con{
/*
padding-left: 0.5rem auto;
padding-right: 0.5rem auto;
padding-top: 0.5rem auto;
padding-bottom: 0.5rem auto;*/
display: grid;
grid-area: con;
justify-content: center;
align-items: center;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
}
.col{
border-right: 0.005rem solid white;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16rem;
grid-template-areas: "con";
color: grey;
z-index: 1;
}
.box{
position: absolute;
padding-left: 0.5rem;
padding-right: 0.5rem;
justify-self: start;
align-self: end;
}
here is the codepen link : https://codepen.io/aronnora/project/editor/DkyrVM
You would probably need to put the content inside its own container and then give it some properties of its own
.center-Container {
display: flex;
justify-content: center;
align-items: center;
}
or a simpler way to just add a padding-top: 40%; to your existing content
Welcome to StackOverflow.
So I went through your CSS. I inspected the elements and found out that the child element with class .con have the default height and is also not inheriting the parent's height because you haven't set height to parent which is not necessary since you are using the grid-template-rows: 48em.
So I would suggest you to set height of .con
for eg.
.con {
height: 48em;
}
I hope this solves your query.
Related
I want to have my container in this section with height 100% insted of that my container only takes one little percentage of the sreen and the rest is taken by (section fp-section fp-is-overflow active fp-completely) and I cannot change it, please help.
This is how I have it, That's the only space available for my div
This is the space i want to have
Here you can see I have my div with height 100% as I want it
In the second section the div is perfect as well, just as i want it
.container-general {
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.container-general-2 {
height: 100%;
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
gap: 30px;
box-sizing: border-box;
}
.container-3{
height: 100%;
display: flex;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
gap: 30px;
box-sizing: border-box;
first two containers working fine, Third one is not
You can replace your height: 100%; for height: 100vh.
That, or use the option scrollOverflow: false if you do not plan on having scrollable sections.
.container {
background: red;
height: 100vh;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
}
Online demo
I need help for grid, green is grid and black is the grid gap. How I can align colon in gap?
I tried with flex and grid but nothing working out.
Result are like :
The colons are a visual clue rather than an integral part of the data.
This means they can be added using pseudo elements.
In this snippet each of the numbers is in a div which has an after pseudo element which is given the same width as the grid gap. It is positioned after the number's div so is placed exactly between two grid items.
Here is a basic example. Obviously you will want to alter the sizes and colors to suit your particular requirements.
.grid {
width: 600px;
max-width: 100vw;
height: 200px;
display: grid;
grid-template-columns: repeat(4, 1fr);
--gap: 30px;
gap: var(--gap);
grid-template-rows: 1fr;
background: black;
}
.grid>* {
color: white;
background: teal;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.grid>* *:first-child {
font-weight: bold;
font-size: 72px;
position: relative;
width: 100%;
text-align: center;
}
.grid>* *:first-child::after {
content: ':';
position: absolute;
left: 100%;
text-align: center;
width: var(--gap);
}
.grid>*:last-child *:first-child::after {
display: none;
}
<div class="grid">
<div>
<div>1</div>
<div>Days</div>
</div>
<div>
<div>2</div>
<div>Hours</div>
</div>
<div>
<div>36</div>
<div>Minutes</div>
</div>
<div>
<div>04</div>
<div>Seconds</div>
</div>
</div>
I'm trying to do a simple navbar, but the size of the border matches the size of the text and not its container's height. I'm trying to 'close' each text inside its own 'rectangle'. How do I achieve that?
.flex-r {
display: flex;
justify-content: space-around;
justify-items: center;
flex-wrap: nowrap;
gap: 1em;
align-items: center;
border: 1px solid black;
min-height: 40px;
}
.nav-item {
border-right: 1px solid black;
width: auto;
}
<div class='flex-r'><a class='nav-item'>Release</a><a class='nav-item'>Statistics</a><a class='nav-item'>Frequent releases</a></div>
You have the container set to min-height: 40px.
Add the same code to the items.
But here's a better overall solution that may work for you:
.flex-r {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px; /* sets the dividing line width */
background-color: black; /* sets the dividing line color */
border: 1px solid black; /* sets the border around the container */
min-height: 40px;
}
.nav-item {
background-color: white; /* restores background color */
/* center the content */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
<div class='flex-r'>
<a class='nav-item'>Release</a>
<a class='nav-item'>Statistics</a>
<a class='nav-item'>Frequent releases</a>
</div>
I tried to create a card in pure CSS using the grid. I divided the card into 4 rows. In the last row, I included a button, and I wanted the button background color to fill up the entire 4th row. But it doesn't fill up when I put background-color:#F25F5C. If I tried to increase the width (by adding grid or inline-block display to the button class), the entire grid acts weird (I've attached the screenshot of that). And even overflow: hidden doesn't work. What should I do?
.cards {
display: grid;
grid-template-rows: 3fr 1fr 1fr 1fr;
align-items: center;
justify-content: center;
text-align: center;
width: 200px;
height: auto;
border: 1px solid #fff;
background: #afafaf;
border-radius: 15px;
}
.cards img {
width: 100px;
height: 100px;
border-radius: 100px;
}
.btn-book {
background: #F25F5C;
color: #fff;
}
<div class="cards">
<img src="Resources/Images/dsc0060.jpg" alt="paris-image" class="image">
<h4>PARIS</h4>
<p>$500/4 days</p>
<a class="btn-book" href="#">Book Now</a>
</div>
Screenshot of when I put width:
use
display: block;
margin-left: auto;
margin-right: auto;
for you the img tag.
.cards {
display: grid;
grid-template-rows: 3fr 1fr 1fr 1fr;
align-items: center;
text-align: center;
width: 200px;
height: auto;
border: 1px solid #fff;
background: #afafaf;
border-radius: 15px;
}
.cards .image {
width: 100px;
height: 100px;
border-radius: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
.btn-book {
background: #F25F5C;
color: #fff;
}
<div class="cards">
<img src="http://placekitten.com/301/301" alt="paris-image" class="image">
<h4>PARIS</h4>
<p>$500/4 days</p>
<a class="btn-book" href="#">Book Now</a>
</div>
Make two adjustments to your grid container:
Remove justify-content: center.
Remove align-items: center.
Then manage the centering of content at the grid item level. Here are the details:
Centering in CSS Grid
The difference between justify-self, justify-items and justify-content in CSS Grid
What is the difference between align-items vs. align-content in Grid Layout?
I'm working on this for hours but can not achieve a working solution. Basically, I want to combine a full-height column (left) with following rows (right) in a two-column-layout with CSS Flexbox.
The full-height column should match the height of the parent's div (.grid-main > main), which is a grid-layout on the other hand.
Screenshot of the issue:
So the yellow boxes should be next to the full-height column and not continue beneath it.
The column should match the height of .grid-main (which could be achieved with flex-direction: column, but all following divs are also listed in a column then).
HTML-Structure:
<div class="grid-main">
<header>...</header>
<nav>...</nav>
<main>
<div class="col-reports"></div>
<div class="classes"></div>
<div class="classes"></div>
<div class="classes"></div>
<div class="classes"></div>
...
</main>
<footer>...</footer>
</div>
CSS:
.grid-main {
display: grid;
height: 98vh;
width: 98vw;
overflow: hidden;
position: relative;
overflow: -moz-hidden-unscrollable;
grid-template-columns: 175px 1fr 1fr;
grid-template-rows: 0.1fr 1fr 0.05fr;
grid-template-areas:
"header header header"
"nav main main"
"footer footer footer";
animation: fadeIn 1s;
transition: 1s all ease-in-out;
}
.grid-main > main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
place-content: flex-start leftjustify-content: flex-start space-evenly;
grid-area: main;
position: relative;
overflow-y: auto;
background: var(--color-accent-main);
}
.col-reports {
flex: 1;
height: 100%;
position: relative;
max-width: 250px;
padding: 20px;
background: rgba(204,204,204,.7);
box-shadow: 1px 1px 25px inset rgb(179, 179, 179);
font-size: .8rem;
font-weight: bold;
line-height: 200%;
}
.classes {
font-family: 'Lora';
line-height: 2rem;
background: #f6efe0;
border-radius: 5px;
padding: 20px;
margin: 10px;
border: 5px solid #eee9dd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
animation: fadeInUp 1s;
}
Visualized the issue:
I solved the issue basically with the following code. So the hint from #Paulie_D was quite helpful, although I wanted to avoid Grid for this basic layouting.
.grid-reports {
display: grid; /* Grid in Grid */
height: 100%; /* In contrast to Flexbox, Grid can be used to assign height: 100% to a container.
It stretches to the parent container even if the viewport changes. Flexbox does not work with height actually.
Unless you use flex-direction: column; to the parent container. */
grid-template-rows: 1fr; /* optional */
grid-template-columns: 1fr 6fr;
grid-area: main; /* referes to Main in .grid-main */
}
.col-students {
grid-row: 1; /* .col-students must only be in the first row of .grid-reports to stretch */
grid-column: 1; /* Only the first column of .grid-reports */
max-width: 250px;
padding: 20px;
background: rgba(204,204,204,.7);
box-shadow: 1px 1px 25px inset rgb(179, 179, 179);
font-size: .8rem;
font-weight: bold;
line-height: 200%;
}
.col-reports {
grid-column: 2; /* All childs of .col-reports and itself are in the second column of .grid-reports
Note: grid-rows are automatically assigned, because they are not adressed any further */
display: flex; /* .col-reports becomes now a Flexbox to align its child items (box). */
flex-wrap: wrap; /* All child elements automatically break */
flex-direction: row; /* All child elements flow in a row */
align-self: flex-start; /* To align items next to each other and at start of Flex */
padding: 10px;
}
.col-reports .box { /* Further definitions of the element in .grid-main */
flex-basis: 45%; /* So the flex-basis in this case relates to the .col-reports
and not to the whole .grid-reports which makes sense and is desired behaviour.
45% means that 45% of .col-reports are used, which is in the second column. */
/*Note: This needs to be assigned as 100% in the mobile section, because elements
must be placed under each other for mobile devices. */
}