So I've got .articleWrapper for post child items that scales just as I want it to scale. However placing this .articleWrapper inside another wrapper-element with dipslay: flex suddenly breaks .articleWrappers ability to scale horizontally after certain point.
There must be some flaw in my logic, but I can't find it.
Below is the code. If I remove display: flex and flex-wrap: wrap; the grid works fine. Also if I replace flex with block, it works fine. If I put display: flex; back in grid-content no longer stack.
.siteWrapper {
display: flex;
flex-wrap: wrap;
}
.articleWrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(285px, 1fr));
max-width: 1100px;
margin: auto;
}
article {
background-color: red;
}
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="siteWrapper">
<div class="articleWrapper">
<article>
<h1>Title</h1>
<p>Para</p>
</article>
<article>
<h1>Title</h1>
<p>Para</p>
</article>
</div>
</div>
</body>
It seems I found one solution myself, but I still don't understand why it works.
Adding width: 100%; to .articleWrapper seems to have fixed the issue in this case.
Related
I am just starting out in html and css and am not sure why my selector is not shrinking my image, can you help me out?
I created a flex-box to put both the image and the caption in, and I plan on adding a paragraph of text on the left side of the screen also in the flex-box which I will also include in the flex-box, but the problem is i can't shrink the image while it's in the flex-box without using a selector for all images instead of for this specific one, what am I doing wrong?
Edit: Made the code reproducible as per requested
#img-container {
display: flex;
flex-direction: column;
align-items: end;
}
#selfie {
flex-basis: 10%;
min-height: auto;
}
#selfie-caption {
justify-content: flex-start;
}
<html>
<link rel="stylesheet" href="resume.css">
<main id="main">
<title>My Name</title>
<div id="img-container">
<figure>
<img id="selfie" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/220px-2010-kodiak-bear-1.jpg">
<figcaption id="selfie-caption">An Image Of Me</figcaption>
</figure>
</div>
</main>
</html>
flex-basis not works, because you set display: flex to #img-container. So your flex item is figure and not #selfie and #selfie-caption. So flex-basis: 10% not give a meaning for that. So should:
figure{
display: flex;
flex-direction: column;
}
#selfie {
flex-basis: 10%;
min-height: auto;
}
On a wide-enough viewport the content of the 'flex-container' element - 'George Zuberi' - stays horizontally-centred thanks to justify-content: center;. However when you narrow the viewport a lot it fails. It needs text-align: center; to still stay horizontally-centred. Why is this?
.grid-container {
display: grid;
height: 100px;
grid-template-columns: 1fr 1fr 1fr;
background-color: #ECF0DE;
}
.flex-container {
/* text-align: center; */
color: #BD6EB6;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<header class="grid-container">
<div class="flex-container">
George Zuberi
</div>
</header>
If you wrap the contents of the flex container with any html element, for example, span, then you will easily understand what's happening here.
Contents of the flex container are actually centered within the flex container but when screen is small enough that the text George Zuberi cannot fit in one line, it wraps and that's when it seems that the contents of the flex container are not centered.
As you can see in the example below, justify-content: center applies on the span element (yellow color) which is why it is centered within the flex container (red color) but text inside the span element isn't centered.
If you want the text inside the span element to also be centered, then add text-align: center on span element.
You can use justify-content to center anything within a flex container and your text is indeed centered within flex-container. Add background color to flex-container to understand things better.
As a tip, instead of writing text directly within the flex-container, wrap the text within any html element.
.grid-container {
display: grid;
height: 100px;
grid-template-columns: 1fr 1fr 1fr;
background-color: #ECF0DE;
}
.flex-container {
background: red;
color: #BD6EB6;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 80%;
background: yellow;
}
<header class="grid-container">
<div class="flex-container">
<span>George Zuberi</span>
</div>
</header>
The reason lies in the .grid-container: You have to limit it to one column (which will then fill the parent and which will also cause the flex-container to be full width, in which again the centering will work as expected:
Addition after some comments: The contents of the flex-container are centered insinde the flex-container as desired. The reason why the text isn't appearing in the middle of the page or of the outer container is that the outer container consists of three grid-columns, which are not apparently visible in this example.
.grid-container {
display: grid;
height: 100px;
grid-template-columns: 1fr;
background-color: #ECF0DE;
}
.flex-container {
/* text-align: center; */
color: #BD6EB6;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<header class="grid-container">
<div class="flex-container">
George Zuberi
</div>
</header>
i don't know if i'm right because i never use grid so i could be wrong, but from what i can see is that you create 3 rows in the grid by using 1fr 1fr 1fr wich means give every row 33% room. in your 33% room you say center my text. so when you reduce your screen-size your 33% percent gets cropped up and automatically goes more to the left, but because you said it has to be centered in that 33% space it moves with the space when it gets reduced to stay centered at the middle, does this make sense?
I am using grid to display 4 columns, but for some reason I can't use justify-content: space-between on them.
Example code:
<div class"wrapper">
<div class"columns">
<div class"column1"></div>
<div class"column2"></div>
<div class"column3"></div>
<div class"column4"></div>
</div>
</div>
.wrapper {
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
.columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
}
What am I achieving right now:
RIGHT NOW
What I want to achieve:
ACHIEVMENT
! Pay attention: 1) Displaying items as flex and justify space between is not a solution for me, because I want to use grid.
2) Giving columns grid-gap is also not a solution for me.
Thanks for your help in advance!
As you can see in the picture, I can manage the second words to be exactly at the same distance from the start of the line by pressing the Tab key.
I want to have the same functionality in HTML. I know I can do this using <table> but I'm curious to know if there is any easier way like MS word or not.
<span>Firstword<span> <span>Second<span>
<br>
<span>Second<span> <span>Third<span>
You can use a flex css to achieve the desired result. Also, add a margin-right according to your need.
<style>
.row {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
margin-right: 1em;
}
</style>
<div class="row">
<div class="col">
<span>Firstword</span> <span>Second</span>
</div>
<br>
<div class="col">
<span>Third</span> <span>Fourth</span>
</div>
</div>
You can specify the width of the spans, so the others will be in the same position:
.tab{
display: inline-block;
width: 150px;
}
<span class="tab">Firstword</span><span>Second</span>
<br>
<span class="tab">Second</span><span>Third</span>
Take a look at this solution using grid
It is very complex, but gives you (like Word) total control over spacing on the page or element.
I divided the grid in columns of 10 pixels and rows of 20 pixels.
body {
display: grid;
grid-template-columns: repeat(auto-fill, 10px);
grid-template-rows: repeat(auto-fill, 20px);
}
span:nth-child(odd) {
grid-column: 1
}
span:nth-child(even) {
grid-column: 12
}
<span>Firstword</span><span>Second</span>
<span>Second</span><span>Third</span>
i have a web page setup which uses css grid to display the main section centered at 80% width.
<html>
....
<body>
<main>
<section>
</section>
</main>
</body>
....
</html>
main {
display: grid;
justify-items: center;
}
section {
max-width: 80%;
min-height: 100%
}
now I would like to also be able to add a second section using a PHP if statement so that both sections are displayed right next to each other at 50% each. (while not altering the css via PHP)
If I just add another section it will be displayed on top or below the first one.
I've already tried using grid-auto-columns as well as setting grid-template-rows to 100% but both didn't work as expected.
Any Ideas on how to solve this?
I'm not completely sure what you are after, but this will give you side by side,
<html>
<body>
<main>
<section>
section1 stuff
</section>
<section>
section2 stuff
</section>
</main>
</body>
</html>
main{
display: grid;
grid-template-columns: 100px 200px 300px;
grid-auto-rows: minmax(100px, auto);
grid-gap:5px;
}
section{
max-width: 80%;
min-height: 100%;
border:1px solid black;
background:red;
}
https://codepen.io/anon/pen/ZovaVG
Ugly in a Pen, but it does what you asked.