Disclaimer: I'm not an experienced web designer.
I've been playing around with grid and have this mock up for different screen sizes but I cannot understand why the div content area grows so much taller than the nested panelwrap grid inside it? (Im testing on Chrome).
According to chrome inspector the size only grows when the content area is over 647px wide.
I just want to understand why the space occurs?
body {
margin: 1em;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
margin: auto;
display: grid;
grid-gap: 1em;
grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas: "header header" "sidebar content" "sidebar2 sidebar2" "footer footer";
}
}
#media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas: "header header header" "sidebar content sidebar2" "footer footer footer";
max-width: auto;
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 0.5em;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}
.panelwrap {
display: grid;
padding: 0.5em;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(auto, auto);
grid-gap: 0.5em;
}
.panel {
background-color: #fff;
color: #555;
border-radius: 5px;
padding: 0.5em;
}
.tall-panel {
grid-row-end: span 2;
}
.wide-panel {
grid-column-end: span 2;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">Content
<div class="panelwrap">
<div class="panel">Panel A</div>
<div class="panel">Panel B</div>
<div class="panel tall-panel">Panel C</div>
<div class="panel">Panel D</div>
<div class="panel">Panel E</div>
<div class="panel">Panel F</div>
<div class="panel tall-panel">Panel G</div>
<div class="panel tall-panel">Panel H</div>
<div class="panel">Panel I</div>
<div class="panel">Panel J</div>
<div class="panel wide-panel">Panel K</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
I believe this may have been an issue with the Chrome browser at the time (not sure of version I used but I am now on Version 63.0.3239.84).
I've just tested the same identical code and the content area now matches the items within it. Previously when the display was > 647px wide the content area was much longer than the panels within.
Related
I'm trying to create different number of columns based on the device.
For example: on mobile I want 2-col layout and on desktop 4-col layout etc...
I've tried messing around with minmax() , but couldn't make it happen the way I want, any advice for achieving this with minmax().
would someone have the answer?
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
<div class="wrapper">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
Not sure how you want to layout your Grid regardless you will have to use Media Queries and define each of your columns.
Example:
div class="col one">1</div>
div class="col two">2</div>
This is the mobile lay out
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas:
"header"
"sidebar"
"content"
"sidebar2"
"footer"
}
This is the Tablet lay out
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas:
"header header"
"sidebar content"
"sidebar2 sidebar2"
"footer footer";
}
}
This is the desktop lay out
#media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas:
"header header header"
"sidebar content sidebar2"
"footer footer footer";
max-width: 600px;
}
}
Here is an example of using css grid with Media Queries. In this example, box is followed with a unique div class name. You can use that class name to layout the grid.
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas:
"header"
"sidebar"
"content"
"sidebar2"
"footer"
}
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas:
"header header"
"sidebar content"
"sidebar2 sidebar2"
"footer footer";
}
}
#media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas:
"header header header"
"sidebar content sidebar2"
"footer footer footer";
max-width: 600px;
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">Content
<br /> More content than we had before so this column is now quite tall.</div>
<div class="box footer">Footer</div>
</div>
I would use bootstrap
basic idea is
lg is used for large windows (desktop)
md is used for medium windows (desktop)
xm is used for small windows (i.e phone / tablets)
xs is used for extra small windows (i.e phone)
you can also hide any of these layouts
<div id="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">1</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">2</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">3</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">4</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">5</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">6</div>
</div>
The objective is to insert side margins for wider screens, while keeping the header span the entire width.
Normally we'd write
.inner {
margin: 0 5%;
}
to get such margins, but it turns out that HTML grids are so flexible that they make side margins possible through dead grid DIVs.
But somehow using dead DIVs does not seem quite right. Is there a way to obtain side margins within a grid. I see how this can be done with a blend of flex and grid. Here I'm wondering if it can be done with grids alone.
body {
height: 100vh; margin: 0; display: flex;
}
.outer{
margin: 5px; border: 5px; padding: 5px;
display: flex;
flex-grow: 1;
}
.inner {
flex-grow: 1;
margin: 5px; border: 5px; padding: 5px; grid-gap: 5px;
display: grid;
grid-template-rows: 100px 5fr 100px;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "side";
}
#media screen and (min-width: 600px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5fr 100px;
grid-template-areas:
"header header"
"content side";
}
}
#media screen and (min-width: 800px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 1fr 5fr 100px 1fr;
grid-template-areas:
"header header header header"
"leftmargin content side rightmargin";
}
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #444;
background-color: #eee;
font-size: 150%;
position: relative;
}
.header { grid-area: header; }
.content { grid-area: content; }
.side { grid-area: side; }
.leftmargin { grid-area: leftmargin; }
.rightmargin { grid-area: rightmargin; }
<div class="outer">
<div class="inner">
<div class="box header">Header</div>
<div class="box content">Content</div>
<div class="box side">Side</div>
</div>
</div>
Use dots (.) to declare empty grid areas:
grid-template-areas:
"header header header header"
". content side .";
Example:
body {
height: 100vh;
margin: 10px;
}
.inner {
display: grid;
grid-template-rows: 100px 5fr 100px;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "side";
grid-gap: 5px;
}
#media screen and (min-width: 600px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5fr 100px;
grid-template-areas:
"header header"
"content side";
}
}
#media screen and (min-width: 800px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5% 5fr 100px 5%;
grid-template-areas:
"header header header header"
". content side .";
}
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #444;
background-color: #eee;
font-size: 150%;
position: relative;
}
.header { grid-area: header; }
.content { grid-area: content; }
.side { grid-area: side; }
<div class="inner">
<div class="box header">Header</div>
<div class="box content">Content</div>
<div class="box side">Side</div>
</div>
I just started learning the CSS grid today, and I can start seeing the point to use this awesome css classes. But one thing that really is confusing me, is how to reorganize the grid on mobile devices.
I made an example below here. That is working how it should on a desktop view. When the screen size is going below 991px. I would like the grid was looking like this:
But how should I control that using the CSS grid?
.wrapper {
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:1em;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column:1/3;
grid-row:1/3;
}
.box2 {
grid-column:3;
}
.box3 {
grid-column:3;
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
You should use #media and you need to make again adjustments for 991px.
.wrapper {
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:1em;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column:1/3;
grid-row:1/3;
}
.box2 {
grid-column:3;
}
.box3 {
grid-column:3;
}
#media screen and (max-width:991px){
.wrapper {
grid-template-columns:1fr 1fr;
}
.box1 {
grid-column:1/4;
grid-row:1/3;
}
.box2 {
grid-column:1/2;
}
.box3 {
grid-column:2/4;
}
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
You can use media queries with #media only screen and (max-width: 990px) -
you can use a two-column grid using grid-template-columns: 1fr 1fr for this view - see demo below:
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
}
.wrapper>div {
background-color: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column: 1/3;
grid-row: 1/3;
}
.box2 {
grid-column: 3;
}
.box3 {
grid-column: 3;
}
#media only screen and (max-width: 990px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.box1 {
grid-column: span 2; /* span the first row */
grid-row: 1; /* first row */
}
.box2 {
grid-column: 1; /* first column */
}
.box3 {
grid-column: 2; /* second column */
}
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
I would like to restructure a page on my angularJS website. Currently data is being displayed in a table view; I would like to create a left sidebar with a (tile) list of names. When a name is clicked on, the right sidebar should display additional details about the selected individual. Any guidance on how to efficiently accomplish this using HTML and CSS will be much appreciated.
Here is the simple code I have so far:
body {
margin: 40px;
}
.lft_sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas: "....... header header" "sidebar content content" "footer footer footer";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="lft_sidebar">Neme 1</div>
<div class="lft_sidebar">Name 2</div>
<div class="lft_sidebar">Name 3</div>
<div class="lft_sidebar">Name 4</div>
<div class="rght_sidebar"> More details about Selected Name</div>
</div>
You can use the grid-column-start and grid-column-end CSS properties to specify where a grid cell should start / end.
body {
margin: 40px;
}
.lft_sidebar {
grid-area: sidebar;
}
.left {
grid-column-start: 1;
grid-column-end: 2;
}
.rght_sidebar {
grid-column-start: 2;
grid-column-end: 4;
}
.header {
grid-column-start: 1;
grid-column-end: 4;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="left">
<div class="lft_sidebar">Neme 1</div>
<div class="lft_sidebar">Name 2</div>
<div class="lft_sidebar">Name 3</div>
<div class="lft_sidebar">Name 4</div>
</div>
<div class="rght_sidebar"> More details about Selected Name</div>
</div>
I want to bring out the elements from a nested grid at a smaller screen width. In the example, the elements are all set to one another when the screen reaches a certain pixel width.
I would like the elements to be displayed one after the other, and to return to the original area with a larger pixel width. Probably this is a fairly simple solution but I could not find any tip yet. Maybe someone has an idea?
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-gap: 1em;
grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas: "header header" "sidebar content" "sidebar2 sidebar2" "footer footer";
}
}
#media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-areas: "header header header" "sidebar content sidebar2" "footer footer footer";
max-width: 600px;
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header,
.footer {
background-color: #999;
}
.sidebar2 {
background-color: #ccc;
color: #444;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content"> Content
<div class="box nested_sidebar">Sidebar 2</div>
<div class="box nested_sidebar">Sidebar 2</div>
</div>
<div class="box footer">Footer</div>
</div>
The grid container is the parent element.
The grid items are the child elements (and only the child elements; descendants beyond the children are not grid items).
The child elements of grid items are, well, whatever they may be, they are not children of the main container, so they are not grid items and cannot accept grid properties like their grid item parents.
Therefore, unless you want to use absolute positioning, there is no clean CSS method for moving nested elements into the main grid container.
However, how about removing the nesting? Grid is very good at allowing elements to overlap.
jsFiddle demo
.wrapper {
display: grid;
grid-template-rows: 1fr;
grid-gap: 1em;
grid-template-areas: "header"
"sidebar"
"content"
"..."
"..."
"sidebar2"
"footer"
}
#media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% 1fr;
grid-template-rows: 100px repeat(3, 50px) 100px;
grid-template-areas: "header header"
"sidebar content"
"sidebar content"
"sidebar content"
"sidebar2 sidebar2"
"footer footer";
}
.nested_sidebar1 {
grid-row: 3 / 4;
grid-column: 2 / 3;
}
.nested_sidebar2 {
grid-row: 4 / 5;
grid-column: 2 / 3;
}
}
#media only screen and (min-width: 800px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto 120px;
grid-template-rows: 100px repeat(3, 50px) 100px;
grid-template-areas: "header header header"
"sidebar content sidebar2"
"sidebar content sidebar2"
"sidebar content sidebar2"
"footer footer footer";
}
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.header {
grid-area: header;
background-color: #999;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
background-color: #ccc;
color: #444;
}
.content {
grid-area: content;
}
.nested_sidebar1 {
background-color: orange;
}
.nested_sidebar2 {
background-color: tomato;
}
.footer {
grid-area: footer;
background-color: #999;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box sidebar2">Sidebar 2</div>
<div class="box content">Content</div>
<div class="box nested_sidebar1">Sidebar 2a</div>
<div class="box nested_sidebar2">Sidebar 2b</div>
<div class="box footer">Footer</div>
</div>
I would play around with using fr instead of % as well as including grid-template-rows to get your desired result.
If you post a wire-frame of what you're hoping to achieve I'd be happy to give it a shot.