Learn CSS Grid today! - Post ID 275699

User 232214 Photo


COO
827 posts

Inger wrote:
Wayan Jaya wrote:
I understand things are in development & state of flux,, but the demo/instructions don't even clearly lay out how to set the grid up,, it just says do this do that, no clear description as to how to do this & that.


Exactly what I'm thinking too.


Can you let me know what you are missing please? An example of what you would like to see would be helpful...

How to setup the grid in grid builder is described here, with a short video below it to visualize the concept. Following that you will need to understand the CSS Grid mechanics a bit to create your layout designs — that part is extensively described below with a number of demos that you can recreate in the grid app. These grid demos are also included in the app (new from theme > showcases) so you can analyze them...

http://bob.coffeecup.com/storage/help/grid-demos.png
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2699991 Photo


Registered User
3,211 posts
Online Now

Bob Visser wrote:
Inger wrote:
Wayan Jaya wrote:
I understand things are in development & state of flux,, but the demo/instructions don't even clearly lay out how to set the grid up,, it just says do this do that, no clear description as to how to do this & that.


Exactly what I'm thinking too.


Can you let me know what you are missing please? An example of what you would like to see would be helpful...

How to setup the grid in grid builder is described here, with a short video below it to visualize the concept. Following that you will need to understand the CSS Grid mechanics a bit to create your layout designs — that part is extensively described below with a number of demos that you can recreate in the grid app. These grid demos are also included in the app (new from theme > showcases) so you can analyze them...

http://bob.coffeecup.com/storage/help/grid-demos.png


Video
The webpage at https://player.vimeo.com/video/23046761 … portrait=0 might be temporarily down or it may have moved permanently to a new web address.

Instructions (Just for starters)
The first (outer most) container, the <div> with classes .grid-demo and .demo-1, is made a Grid parent by applying display: grid; in the CSS.
Then, on the same container, two grid columns are created for small screens and three columns for wider screens through the .demo-1 selector class
.(HOW DO WE ACTUALLY DO THAT
using the auto value twice creates two columns, and writing it out it three times sets up the three column structure.
again how do we do tha

The video thingy has never worked for me here, maybe that shows actually how to do that process.
There is more but I am back into my no Internet zone for a couple of days,

Wayan

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,345 posts

Sorry, I haven't got time for CGB right now. Overworked, and husband in hospital. I'll get back to it later.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 232214 Photo


COO
827 posts

Wayan Jaya wrote:


Video
The webpage at https://player.vimeo.com/video/23046761 … portrait=0 might be temporarily down or it may have moved permanently to a new web address.

Instructions (Just for starters)
The first (outer most) container, the <div> with classes .grid-demo and .demo-1, is made a Grid parent by applying display: grid; in the CSS.
Then, on the same container, two grid columns are created for small screens and three columns for wider screens through the .demo-1 selector class
.(HOW DO WE ACTUALLY DO THAT
using the auto value twice creates two columns, and writing it out it three times sets up the three column structure.
again how do we do tha

The video thingy has never worked for me here, maybe that shows actually how to do that process.
There is more but I am back into my no Internet zone for a couple of days,

Wayan


The video shows exactly that, not sure why Vimeo would not work in Bali...?

Just to be clear, the tutorial is not an app manual, it is written to understand CSS Grid. Doing that with the app should make it easier to get a feeling for the possibilities and build a good understanding of this cool new CSS Module.

However, to get everybody started with the app I added some screenshots and more explanation on how to start the 1st grid demo in CSS Grid Builder. Continuing from there should be self-explanatory, look at the demos, read what I am doing and try to replicate that in the app.

Let me know if there are more things I can improve or add :P

The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2699991 Photo


Registered User
3,211 posts
Online Now

Thanks for that Bob, that's all I needed t o get the thing set up properly & I am sure I am not Robinson Crusoe on that little hurdle needed to just get going

I am not in Bali at the moment I am in the remotest area of Java. where the internet is almost non existent, and what there is is very very slow (3 or 4 KPS !! at best ) that could be causing the problem for me with the video.
I have done 1 page already which was pretty straightforward, will spend the next couple of days trying it out again.

Thanks again

Wayan

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 185561 Photo


Registered User
102 posts

I never said the hack was good. What I said was that our clients (mostly win 8, 8.1, and 10 (w/Edge v15)) REALLY prefer EDGE over all other browsers. It seems that until MS releases Edge v16 we will have no way to support their needs using this tool. We do have Chrome, Safari, and Firefox clients that this tool will work with and have an impact. We are testing this tool heavily with these browsers and will provide feedback as requested.

Thanks!
Once you accomplish the impossible, then you can move on to the hard stuff!
User 2887055 Photo


Guest
2 posts

With CSS Grid web layout design will never be the same again. Better, creative, impressive and different than what we have seen before.
User 131545 Photo


Registered User
671 posts

Hi all,

How can I do this if the css code is given in cssgrid?

.mainheader {
grid-column: 1 / 3;
grid-row : 1;
}
.panel {
Grid-column: 1;
Grid-row: 2;
}
.content {
grid-column: 2;
grid-row : 2;
}

Where can I add numbers of lines?

Kind regards
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.