Archive of: grid

• Randomizing cat photos in a grid

  May 13, 2021

  Today I’ve added some randomization to set a random image as the featured image and added the functionality of switching out the photos whenever you click on one. I’m excited to get to work setting up the timer to rotate them in and out of the featured spot.

  100daysofcode, CSS, HTML, JavaScript, grid

• Grid row and column span practice

  April 21, 2021

  For a little while now, Apple has been displaying info about their new products in this nifty grid layout during their events. I took a shot at making one based on the new iPad Pro slide shown during the April 20, 2021 event. It’s a pretty fancy looking and powerful machine, along with the new iMacs.

  100daysofcode, CSS, HTML, grid

• Grid Area and Grid Template Area Practice

  April 11, 2021

  CSS Grid has been so interesting to me ever since I heard about it via Rachel Andrew’s book, Get Ready for CSS Grid Layout. It got me excited about working with CSS again. I haven’t made anything amazing with it, but it has helped me a lot in making attractive layouts. Today’s practice however, is not one of those! It’s just practice.

  100daysofcode, CSS, HTML, grid

• Post listing mockup using a three column grid

  March 30, 2021

  Planning a site redesign can be a bit stressful, but it's a good time to review what you've previously made and improve the areas you know you can do better. Today I worked on a potential way of displaying posts on my index pages. I'm not sure if I like it, but I'll revisit it at a later time.

  100daysofcode, CSS, HTML, grid

• Full-bleeds in CSS Grid

  March 17, 2021

  A couple weeks or months ago I saw and briefly read over Josh Comeau's post about how to do a full-bleed using CSS grid. The layout features a full-bleed class to pop elements out of the grid and drawing more attention to them. I'd like to see how I could put something like that into place on my site, so I tried out the CSS Josh shared in his article.

  100daysofcode, CSS, HTML, grid

• Tricky times with CSS Grid

  March 13, 2021

  Moo Mini Cards are a great way to get some of your photos printed. They used to make a nifty frame, that fit about 20 or so cards, that allowed you to place mini cards inside in landscape or portrait orientation. I tried to recreate the style of the frame using CSS grid, and I am scratching my head at the moment. I don't think I'll get it working right today, so I'll give it a try some other time.

  100daysofcode, CSS, HTML, grid

• Animating grid column

  August 5, 2020

  I wanted to see if I could animate the position of grid element by creating an animation that used grid-column. It looks like you can't do that, so I'll need to figure out an alternative if I want to try that in the future. I'm not quite sure of a use case for it, but I thought it was worth giving a shot.

  CSS, HTML, animations, grid

• min content max content practice

  July 10, 2020

  I rewatched a Layout Land video on min-content and max-content and wanted to do a quick refresher.

  CSS, HTML, code, grid