I am just starting out with CSS Grid and it's displaying proper boxes in proper places, but in wrong pixel size???? The main container is displaying at about 1500px instead of 1200px and all the row dimensions are wrong too.
#container {
width: 1200px;
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 225px 175px 225px 160px;
}
.feature {
grid-row: 1 / 5;
}
.vertical {
grid-row-end: span 2;
}
.im_picture {
background-color: #336;
}
.im_picture img {}
.button {
background-color: #808000;
grid-column: 2 / 4;
}
<div id="container">
<div class="im_picture feature"></div>
<div class="im_picture vertical"></div>
<div class="im_picture"></div>
<div class="im_picture vertical"></div>
<div class="im_picture"></div>
<div class="button">book a session</div>
Nothing wrong with the code, it's an issue with a combination of Chrome and Windows settings
https://superuser.com/questions/1139259/how-to-adjust-ui-scaling-for-chrome
Related
I am new to CSS grid and trying to implement the second row only in the below picture.
I've tried to create six sections but have the second section spread out longer. For example I've tried:
grid-column: 2 / span 5;
But it seems to push the last four section to the next line cause it to wrap which I do not want.
my unsuccessful code:
.container {
border: solid black 3px;
height: 100px;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.item {
border: solid skyblue 1px;
}
.item:nth-of-type(2) {
/* grid-column: 2 / span 5; */
}
<div class="container">
<div class="item"></div>
<div class="item">Totals</div>
<div class="item">6000</div>
<div class="item">-</div>
<div class="item">194</div>
<div class="item">12.5%</div>
</div>
Try auto on the columns, with 1fr on the flexible one.
.container {
border: solid black 3px;
height: 100px;
display: grid;
grid-template-columns: minmax(100px, auto) 1fr repeat(4, minmax(100px, auto));
}
.item {
border: solid skyblue 1px;
}
<div class="container">
<div class="item"></div>
<div class="item">Totals</div>
<div class="item">6000</div>
<div class="item">-</div>
<div class="item">194</div>
<div class="item">12.5%</div>
</div>
jsFiddle demo
Try adding grid-auto-flow: column; to your .container and change grid-column: 2 / span 5; to grid-column: 2 / span 3;
The code snippet below creates the desired behaviour for my components.
I want each row to have an individual height, both elements in that row to have the same height, and for small screens, only 1 column, and all "A" content should come first, then all "B" content.
It is just that my solution feels wrong to me. I feel like I am missing grid fundamentels on how to achieve this.
To be honest, I expected that giving A grid-column: 1 and B grid-column: 2 should have worked, but it did not.
FYI: the inline style height is just for simplification. In reality, I do not know the height. and the code looks something like this:
<Grid>
{CME puts all A here}
{CME puts all B here}
</Grid>
.A {
background-color: dodgerblue;
grid-column: 1;
}
.B {
/* grid-column: 2; */
background-color: red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
column-gap: 2%;
row-gap: 50px;
}
#media screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}
<div class="grid">
<div class="A">A1</div>
<div class="A" style="height: 150px">A2</div>
<div class="A" style="height: 50px">A3</div>
<div class="B" style="height: 200px">B1</div>
<div class="B">B2</div>
<div class="B">B3</div>
</div>
You can be explicit about which column you want B to go into.
This snippet ensures it's in column 2 in the wide version and in column 1 in the narrow one.
.A {
background-color: dodgerblue;
grid-column: 1;
}
.B {
grid-column: 2;
background-color: red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
column-gap: 2%;
row-gap: 50px;
}
#media screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
.B {
grid-column: 1;
}
}
<div class="grid">
<div class="A">A1</div>
<div class="A" style="height: 150px">A2</div>
<div class="A" style="height: 50px">A3</div>
<div class="B" style="height: 200px">B1</div>
<div class="B">B2</div>
<div class="B">B3</div>
</div>
I'm working on a website and I have 4 grid cells which take up a section of my webpage. The issue is that all of my text is in random places, I want it to be centered within each grid item (one is gray, one is blue, one is black, one is yellow).
I've tried every combination of justify, align, self, any idea how I can do this? Any help would be very much appreciated.
Here's my jsfiddle documenting the problem: https://jsfiddle.net/RomelF/jd8L7a6n/3/
And here's my HTML:
<div class="container">
<section id="welcome-section"><h1 id="name">My name's Romel, here are some of my projects:</h1>
</section>
<section id="projects">
<div class="project-tile" id="p1"><p class="ptext"><a href="#">Tribute Page<a></p></div>
<div class="project-tile" id="p2"><p class="ptext"><a href="#">Political Questionnaire<a></p></div>
<div class="project-tile" id="p3"><p class="ptext"><a href="#">Landing Page<a></p></div>
<div class="project-tile" id="p4"><p class="ptext"><a href="#">Technical Documentation<a></p></div>
</section>
And here's my CSS:
#projects {
width: 70%;
display: grid;
}
...
.project-tile {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
place-items: stretch;
height: 50vh
}
#p1 {
background: rgb(255,253,254);
background: radial-gradient(circle, rgba(255,253,254,1) 0%, rgba(74,75,75,0.4) 100%);
grid-column: 1 / 2;
grid-row: 1 / 2;
}
#p2 {
background-color: black;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
#p3 {
background-color: blue;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
#p4 {
background-color: yellow;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.project-tile a {
text-decoration: none;
}
.ptext {
align-self: center;
}
your .project-tile doesn't need to be a grid itself. Using flexbox gives you all the tools you need to center an element.
.project-tile {
display: flex;
place-items: center;
height: 50vh;
}
.ptext {
margin: auto
}
This will give you centred text as long as the text fits inside the boundaries of the parent.
Please remove this style
.project-tile{
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
My goal is to break my screen in four different blocks that are not the same size, just like in the picture (block one and two should be the same size). I tried using bootstrap which kinda works but it makes it scrollable and I want to avoid that. Is there a way to make it not scrollable and have each block in a fixed size? Any tips would be appreciated. I'm using bootstrap and angularjs.
This is what I have so far, but I want to make full screen.
https://codepen.io/BrunoTrax/pen/XWWVNgL
<style>
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: col1-start / col3-start;
grid-row: row2-start ;
}
.b {
grid-column: col3-start ;
grid-row: row1-start / row2-end;
}
.c {
grid-column: col1-start;
grid-row: row1-start ;
}
.d {
grid-column: col2-start ;
grid-row: row1-start ;
}
</style>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>
You should check out CSS "Grid's". Basically, you can declare a grid inside your css and use the grid-template-columns property to display your blocks in various arrangements. Here is a good resource that shows you how to create a custom layout.
The grid property also allows you to declare a height and width which will fix your scrolling problem.
Check this out and start experamenting.
CSS
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
.grid > header {
grid-area: head;
background: #eee;
}
.grid > navLeft {
grid-area: nav;
background-color: #a072;
}
.grid > main {
grid-area: main;
background-color: #8510ff;
}
.grid > footer {
grid-area: foot;
background-color: #8cffa0;
}
HTML
<header> Hello</header>
<navLeft> Hello</navLeft>
<main> Hello</main>
<p> Hello</p>
<p> Hello</p>
</div> ```
I have the following grid layout:
<div class="main-page">
<div class="side-bar"></div>
<div class="nav-bar"></div>
<div class="index-view"></div>
</div>
and I am trying to insert a new div between sidebar and index such that the resulting layout will be like:
<div class="main-page">
<div class="side-bar"></div>
<div class="nav-bar"></div>
<div class="profile-pane"></div>
<div class="index-view"></div>
</div>
My attempt so far has been:
.main-page {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 72px 1fr;
height: 100%;
}
.main-page > .side-bar {
display: grid;
grid-row: 1/4;
width: 80px;
}
.main-page > .profile-pane {
width: 260px;
position: relative;
grid-row: 2/4;
}
.main-page > .index-view {
grid-row: 2/4;
}
This renders a huge space between profile and index and compresses index to the right. I've been trying different values for the grid-row property but to no avail. However, if I remove either one of profile and index, the remaining div will render nicely and right beside the sidebar. How do I achieve the second layout?
You can consider different values based on the existance of the profile element:
.main-page {
display: grid;
grid-template-columns: 80px 1fr 4fr;
grid-template-rows: 72px 1fr;
height: 200px;
margin:20px;
}
.side-bar {
grid-row: span 2;
}
.nav-bar,
.index-view {
grid-column:span 2;
}
/* Take only one clumn if profile exist*/
.profile-pane + .index-view {
grid-column:span 1;
}
/* Irrelevant code */
.main-page > * {
border:1px solid;
}
.main-page > *:before {
content:attr(class);
}
<div class="main-page">
<div class="side-bar"></div>
<div class="nav-bar"></div>
<!--<div class="profile-pane"></div>-->
<div class="index-view"></div>
</div>
<div class="main-page">
<div class="side-bar"></div>
<div class="nav-bar"></div>
<div class="profile-pane"></div>
<div class="index-view"></div>
</div>
You can achieve the desired result by setting the "grid-row: span 2" property in the sidebar to increase its height by two lines. And for the navigation bar, the "grid-column: span 2" property is to expand it into two columns
Oh yes, and do not forget to set the columns of the required width for the grid container grid-template-columns: 10% 15% 70%;
Result:
.main-page {
display: grid;
grid-template-columns: 10% 15% 70%;
}
.main-page>* {
padding: 20px;
border: 1px solid #000;
}
.side-bar {
grid-row: span 2;
}
.nav-bar {
grid-column: span 2;
}
.index-view {
min-height: 500px;
}
<div class="main-page">
<div class="side-bar">side-bar</div>
<div class="nav-bar">nav-bar</div>
<div class="profile-pane">profile-pane</div>
<div class="index-view">index-view</div>
</div>