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.
Related
I am trying to center a div that has a few inner div with some classes.
For example:
<div class="one">
<div class="two">
<article class="three">
...
</article>
</div>
</div>
Assume we don't know what classes one, two, and three are. Is it possible to center horizontally <div class="one"> and everything inside?
I have tried for example text-align: center; as style but it didn't work.
UPDATE:
Actually, tacoshy's recommendation worked, but it is not exactly what I want. Please see these drawings:
This is before applying tacoshy's recommendation:
This is after applying his recommendation:
And this is what I want:
Is is possible to make the books closer together at the center?
To center an element, the best way in my opinion is by using Flexbox. You just got to add those 3 properties to the parent :
display: flex
justify-content: center
align-items: center
So in your exemple, I believe it's the body if you want to center the only div on your page. Otherwise, you need a way, by aiming a div using an ID instead of class, or with :nth-child(n).
text-align: center works only for text or other elements with display: inline
Why not using CSS Grid? (don't if you are using bootstrap with the css grid option)
.one {
display: grid;
background-color: white;
width: 80vw;
height: 80vh;
margin: 10vh 10vw;
}
.two {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0;
}
.three {
background-color: yellow;
border: 1px solid black;
width: 20vw;
height: 100%;
}
.three:first-child {
justify-self: end;
}
.three:last-child {
justify-self: start;
}
<div class="one">
<div class="two">
<article class="three">
...
</article>
<article class="three">
...
</article>
</div>
</div>
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.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am starting in front-end and I am currently studying html / css / vanilla javascript.
For the moment it is going well but I have a concern for understanding the design layout organization in general, and then responsive design becomes another problem for me as I cannot define a default layout correctly.
What are the best practices ?
Using CSS GRID, should I only create basic areas like header, nav, main, footer? or should I also create nested grid inside div/section ?
For exemple:
Should I declare in CSS:
#main-grid{
display:grid;
grid-template-areas:
"nav nav"
"head head"
"bio bio"
"picture1 article1"
"article2 article2"
"picture2 picture2"
"article3 picture3"
grid-template-columns: auto auto;
or should I simply declare a main content area (span 1) with CSS GRID and add div inside in html (using flexbox, float, playing with witdh,height, etc...?
#main-grid{
display:grid;
grid-template-areas:
"nav"
"head"
"main-content";
grid-template-columns: auto;
}
and #main-content in html:
<div>picture1 + article1 </div>
<div>article2 + picture2</div>
<div>article3 + picture3</div>
I know that everyone does their own thing and that it depends on the project but I suppose that there are good practices or logic to be applied by default.
Thank you!
I don't think
#main-grid{
display:grid;
grid-template-areas:
"nav nav"
"head head"
"bio bio"
"picture1 article1"
"article2 article2"
"picture2 picture2"
"article3 picture3"
grid-template-columns: auto auto;
}
is a great idea. What if you have 100 articles and pictures ?
You can do a combination of grid for the layout globally and flexbox/grid to manage articles & pictures.
I would do something like that for example to have everything pretty much responsive :
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.mySite {
display: grid;
grid-template-columns: 1fr .5fr;
grid-template-areas:
"header header"
"main aside"
"footer footer";
}
header {
grid-area: header;
height: 40px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
main {
grid-area: main;
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
background: blue;
padding: 25px;
}
article {
background: aliceblue;
max-width: 200px;
height: 100px;
width: 100%;
}
aside {
grid-area: aside;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
footer {
grid-area: footer;
height: 150px;
background: yellow;
display: flex;
align-items: center;
justify-content: center;
}
<div class="mySite">
<header>
<p>HEADER</p>
</header>
<main>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</main>
<aside>
<p>SIDEBAR</p>
</aside>
<footer>
<p>FOOTER</p>
</footer>
</div>
As you can see, the articles will auto adapt thanks to those lines :
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
And to auto adapt your layout you can use media queries. For example here, If I want everything to be in block below 767px I would do something like that :
#media only screen and (max-width: 767px) {
.mySite {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"aside"
"footer";
}
}
You can automatically adapt your layout thanks to the CSS grid directly in the parent.
Globally, you will manage the layout with the CSS Grid when you have delimited areas (typically header, sidebar, footer, ...)
Flexbox will help you to shape the inner content, like for an article, to do for example : the date on the left and the author on the right of the block with this :
display: flex;
justify-content: space-between;
You can consider flexbox as one dimensional. Flexbox can make rows and columns in the sense that it allows elements to wrap, there’s no way to declaratively control where elements end up since the elements merely push along a single axis and then wrap or not wrap accordingly. They do as they do, if you will, along a one-dimensional plane and it’s because of that single dimension that we can optionally do things, like align elements along a baseline — which is something grid is unable to do.
and CSS grid as two dimensional in that we can (if we want to) declare the sizing of rows and columns and then explicitly place things into both rows and columns as we choose.
I have the following grid which I want to span for exactly the height of the screen - not less, not more. In the grid, I have a fixed header (one), a fixed footer (three) and a scrollable content (two)
.grid-container {
display: grid;
grid-template-areas:
"one"
"two"
"three"
;
grid-template-rows: 33px 1fr 34px;
height: 100vh;
}
What happens is that if the content inside two gets too large, the height of the entire grid is now larger than the viewport. As a result, my footer gets pushed down, while I would like instead to scroll the content and keep the footer where it is.
I know I can achieve what I want with position: fixed, but this is a trimmed-down example of a more complex grid. Any help is appreciated, I prefer to keep the grid approach if at all possible. I put together a fiddle for your convenience. Thank you!
https://jsfiddle.net/x6stfc01/1/
HTML For your convenience
<div class="grid-container">
<div class="one"></div>
<div class="two">
Start of Content
<div style="height: 5000px"></div>
End of Content
</div>
<div class="three"></div>
</div>
You could just add overflow-y: scroll to the two item or overflow-y: auto (even better)
body {
margin: 0;
}
.grid-container {
display: grid;
grid-template-areas: "one" "two" "three";
grid-template-rows: 33px 1fr 34px;
height: 100vh;
}
.one {
grid-area: one;
background-color: blue;
}
.two {
grid-area: two;
background-color: yellow;
overflow-y: scroll;
}
.three {
grid-area: three;
background-color: red;
}
<html>
<head>
</head>
<body>
<div class="grid-container">
<div class="one"></div>
<div class="two">
Start of Content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> End of Content
</div>
<div class="three"></div>
</div>
</body>
</html>
I want to use CSS grid and the following is a mock-up of the aim:
I'm building an interface that should expand rightward to fill the browser screen; my current code causes column 2 of the outer grid to be as wide as the browser in addition to column 1; or maybe one of it's children is causing this and it's just expanding to accommodate. Either way, it's spilling off the page horizontally
So the code:
#main {
width: 100%;
display: grid;
grid-template-columns: 250px 100%;
grid-template-rows: 100px 100%;
}
#col-2-outer {
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100%;
}
#row-1-inner {
grid-column: span 2;
}
#col-2-inner table {
width: 100%;
}
<div id="main">
<div id="col-1-outer"></div>
<div id="col-2-outer">
<div id="row-1-inner"></div>
<div id="row-2-inner">
<div id="col-1-inner"></div>
<div id="col-2-inner">
<table></table>
</div>
</div>
</div>
</div>
FYI, for the time being I've forgone template areas until I get a handle on the basics (unless this somehow solves my problem but I gather this is strictly a code organization feature?).
I'd suggest to change your markup with a 3x2 grid like below:
Remove the hierarchical structure like you have in your code and add one element for each section in the grid.
Note that in the rule grid-template-columns: 250px 150px auto, 250px is the width of your col-1-outer and 150px is the width of the col-1-inner.
Span the first column over the two rows by using grid-row: span 2
Span the first row in the second column by using grid-column: span 2.
Extend the table over the last grid item by using 100% width and height.
See demo below:
* {
border: 1px solid; /* For illustration */
}
#main {
width: 100%;
display: grid;
grid-template-columns: 250px 150px auto;
grid-template-rows: 100px auto;
}
#col-1-outer {
grid-row: span 2;
}
#row-1-inner {
grid-column: span 2;
}
#col-2-inner table {
width: 100%;
height: 100%;
}
<div id="main">
<div id="col-1-outer">col-1-outer</div>
<div id="row-1-inner">col2-row-1-inner</div>
<div id="col-1-inner">col2-row2-inner</div>
<div id="col-2-inner">
<table><tr><td>table</td></tr></table>
</div>
</div>
The 100% for the 2nd column in your grid-template-columns is based on the width of the container - rather than occupying the space outstanding within the container, it will push out to the right because the 2nd column is trying to match the width of the container.
Try changing this to auto and this should rectify the issue, as it will only take up the space up to the end of the container and no further.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns