I had some time and wanted to play with some Grid in Site Designer. After playing with Grid Area based placement, that is great if you have a full layout planed and takes some time since the placement container needs named in one area then defined in another. Then you have to redesign your layout at each breakpoint and pretty much have to have a full design in mind.
I prefer a top to bottom design, as well as desktop down design. So, I use the Frameworkless – Desktop Down template. Decided I like to use ‘Mini Grids’, down the page instead of the full grid design. I made a page based on Visions demo that worked on the top down design I like and decided to play Grid. My page is called 'Dream Land' at the website ….

http://dream-land-506188.netlify.app/

The header is composed of a Main Grid with three Sub Grids. The main grid uses ‘auto-fit 405 1fr’ repeat/minmax to create the responsive transitions, instead of breakpoints. The three sub grids are just used for centering of the containers both left and right and up and down (Justify and Align) and width control. The gap command is used as I strip all the padding and margin added when adding items as I have better control with the Gap command. Had to use one breakpoint to change the Grid flow direction for the Menu Buttons as grid cannot change this, and change some Grid autofits, but most transitions are done with the autofits to allow better flow when resizing screen.
The Hero is not grid, but the Wonderful and Romantic are sub grids in a grid wrapper to provide the transition. The Wonderful, Romantic, and Exotic are grids that contain a picture (downloadable) and the text overlays are made by Grid overlap. Taking the text and overlapping on the pix allows both the pictures and text as selectable. No breakpoints or backgrounds used here, and grid controls all the responsive transitions.
The footer is one Grid for transition control and four sub grids used for centering and width control. Controlling width, centering and gaps from one screen is nice. So, I started from the top and went down and have thirteen grid areas on this site. It also has no flex as I have not ventured there yet.
I designed the transitions to look good on a 10-inch tablet down (I own both apples and android devices) to a thin phone, but works on the desktop as well. And I know this site being all grid will not look in IE11 at all, and I do not care. Most web viewing is done on a phone or tablet and if they are the 1 to 2% who have not moved on from IE11 then that is their problem.
Jay Shrimplin

Interesting project! And it is not bad in IE11 either, the only thing I can see is that the text and the menu in the header section get a bit too close.
I was a bit sceptic to the use of sub-grids. Last time I checked on caniuse.com (about a month ago) it said it had barely a wee bit of support in Firefox, but I see it works in Edge, so maybe it will work after all.

It would be interesting to see your project file. Do you mind posting it?

The Sub Grid, that I refer to is not the Subgrid commands that will come out in version 2 of grid. My reference of sub grid is a grid inside another grid. These work well for me now, but next version that is only available on Firefox Nightly for now is just testing for Version 2 of Grid. You can play with it now, but even though SD can preview in Firefox Nightly, the SD interface will have to be updated to use these commands. The feature of the CSS Grid Layout Module Level 2 allows a grid-item with its own grid to align in one or both dimensions with its parent grid. Once these are implemented then setting up cards that are responsive and fully aligned will almost automatic. And wild layouts will be available to us then.

I use the Grids inside of grids and can work with outer alignment, and transitioning, but the inner alignment will come later.
I have attached the Dream Land project files so you can view my method. If you find any new ways to use these then please share. This grid stuff is new and exciting.
http://jshrimp.coffeecup.com/storage/Dreamland.zip
Jay Shrimplin

Subgrid will make things so much better, but here is my playing with Cards in Grid for now. I have made the cards different heights for now so you can see that cards adjust to different heights as dictated from side to side. The Cards1 has no breakpoints and transitions on grid commands only.
https://cards1-3bc228.netlify.app/
Cards2 uses one breakpoint to control the cards for tablets better. No data changed, just the Main Grid values.
https://cards2-d20947.netlify.app/
The design is a Grid with auto-fit 294px 1fr grid with a card grid installed inside the grid. Then adding elements inside the card. Then all I do is copy the card container over and over and placing new elements into them. The card will size itself to fit the data. This shows that the height of the sub grids sizes on its data or to the size of the card next to it if it is larger.
Note the buttons do not align as spacing on grids is using gaps only and each card is independent of each other in grid version 1 I will use this layout to note my favorite restaurants with notes for each, and will also use this to make myself some contact cards as the cards look great in large screens and small phones. I can copy the card container and add as many cards as I want and it will be auto responsive.
Jay Shrimplin

Hi Jay, thanks for posting the project file! I have downloaded it, but because I have a 'millstone' hanging over my head until the end of this month, I will check it out after that

Hi Folks,

I redesigned my business website using Site Designer v4. I use Site Designer on a Mac desktop and a Windows laptop, with project files synced using OneDrive (Microsoft 365). The site uses the Foundation 6 framework and was build up from using the CoffeeCup Holker Houses template as a starting point.

https://www.henwig.com/

I love being able to make alterations to the site irrespective of whether I'm in the office or out and about. My previous web design app was Mac only and it was frustrating not being able to do any work on the site when on a train journey/business trip/etc.

A massive shout out goes to Wayan Jaya, who provided a massive amount of help to me with regards to web design best practices and how to use Site Designer. I cannot thank him enough for his knowledge and patience with me.

In addition, thank you to everyone else who helped me via this forum. It was very gratefully received.

The design of the site is ongoing. I want to do some page loading performance improvements, and the creation of the support section of the site has taken a massive delay due to Covid-19 (I'm one of the people who wasn't granted massive amounts of free time when lockdown hit the UK). The blog section should have had more content by now, but I'm just going to say 'Covid' regarding that too!

All feedback greatfully received.

All the best everyone.

Hi All

My latest project for a client:

https://www.ict-s.co.za/

I used the following to design it design it:

1) Site Designer 4.0 - Materialize
2) Responsive Content Slider
3) Web Form Builder

Hi Chris,
Microsoft Edge has a small height problem with the hamburger menu section.
See attached screenshot.

And on my phone the slider has a small jump for the first slide only small but enough to be noticeable, otherwise everything else seems ok, nice looking clean website

Update
Actually on closer inspection it could be the little grey slider indicator buttons causing it, to appear to jump whereas it would seem that the buttons container only appears on the last slide

Well Done Chris!!! I love the use of those high rez images it really brings a ZIP BANG BOOM to the website. Very visually stimulating. Keep up the great work!

Steve