Skip to main content

The Many Forms of An Image Gallery, ft HTML, CSS, and Sass

Going from v.1 to the completed v.3

I collect Disney mugs (and some non Disney ones). One from every Canon film . I want to put all (35? 37?) in a grid.

 Much of the base code for V1. came from the CSS Grid page here, at W3 Schools.

Version 1

I wanted to have more than 3 entries per row.

I thought sticking a new grid container (grid-cont) would fix that problem.


<div class="grid-cont">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  

  <!-- Puts it beneath but not to the side -->
<div class="grid-cont">
  <div class="grid-item">4</div>


 It just added a bit of space beneath the first 3.

I did end up getting a fourth box added in the row, but that seems to be the limit per row.

This article kind of encompasses the layout, but I'm not sure I can add different backgrounds to each tile like I want.

Version 2

Within .grid-item, I put this;

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<!-- How can we change the amt of entries in the row? adjusting the grid container? -->
<div class="grid-cont">

And while the correct effect is in place, (The goal is one different image per box, not the same image repeated in every box). Will I have to make separate grid items for each of my 30+ images? Make each box its own grid and then do so?


<div class="grid-item"><p>check</p>
  <div class="grid-item">6</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">3</div
  <div class="grid-item">4</div>
  <!-- Puts it beneath but not to the side -->
  <!-- I think it's just how the language works - 4 max -->


You can see the opacity is different in each box. 

So I went back to Youtube to find another tutorial; This one from XO PIXEL.

The original code is a little odd to me (You don't see my code here):

  • They make the paragraph text in the boxes links and in an unordered list. I can't see why. I took those aspects out and added some top padding to the top to push the text down.
  • I made the cursor a crosshair.

A separate issue from the coding; The opacity on the divs affects the other elements, like text, as well. I don't want it to. I want it to only affect the image. I put the !important marker.  

 It's a demo image, which is still not affected by opacity.

Also, all of the boxes are in a giant line instead of two in a row or so. 

Question List:

How can I put different images for the background in each grid without making 35 different grids.

How do I change the filter to only affect part of the elements.

Version 3

So on Jan 11th, Tyler Potts uploaded THIS video. You can tell by the screengrab of his video that there are placeholders in some boxes that can possibly be manipulated to hold different images.

It's focused more on Responsive CSS-ness (CSS Grid). I'm just here for the grids. Also used Sass for the first time - A compiler translated it into CSS. Why not just use CSS at that point

There is also a neat image placeholder code that's officially recognized (but not shown in the final page). Check out the final product here.

Here's a walkthrough I did, where I edit some things on the fly:


Popular posts from this blog

Connecting IoT Devices to a Registration Server (Packet Tracer, Cisco)

In Packet Tracer, a demo software made by Cisco Systems. It certainly has changed a lot since 2016. It's almost an Olympic feat to even get started with it now, but it does look snazzy. This is for the new CCNA, that integrates, among other things, IoT and Automation, which I've worked on here before. Instructions here . I don't know if this is an aspect of "Let's make sure people are paying attention and not simply following blindly", or an oversight - The instructions indicate a Meraki Server, when a regular one is the working option here. I have to enable the IoT service on this server. Also, we assign the server an IPv4 address from a DHCP pool instead of giving it a static one. For something that handles our IoT business, perhaps that's safer; Getting a new IPv4 address every week or so is a minimal step against an intruder, but it is a step. There are no devices associated with this new server; In an earlier lab (not shown), I attached them to 'H

Building, Breaking, and Building A CRM with Retool

 I like no- or low-code solutions to things. I've often wanted to simply push a button or move some GUI around and have the code implement itself.  I've thought about building something that's like a customer relationship management (CRM) system for keeping up with my network better than my little spreadsheet where I click links and then go like something. The general idea in this CRM Development is:  To have a GUI to add people to a NRM (Network Relationship Management).       Attach it to a database (MySQL is what I went with eventually using Amazon Relational Database service, but you can use PostGRES, and probably others).     Make sure components are connected to each other in the retool interface. This video is a good start. Watching the tutorial video, heard some SQL commands and went 'Oh no 😳" before going "Wait I know basic SQL", which is good, because you'll see.  When you get set up, there's a plethora of resources you can use -- Incl

Securing Terraform and You Part 1 -- rego, Tfsec, and Terrascan

9/20: The open source version of Terraform is now  OpenTofu     Sometimes, I write articles even when things don't work. It's about showing a learning process.  Using IaC means consistency, and one thing you don't want to do is have 5 open S3 buckets on AWS that anyone on the internet can reach.  That's where tools such as Terrascan and Tfsec come in, where we can make our own policies and rules to be checked against our code before we init.  As this was contract work, I can't show you the exact code used, but I can tell you that this blog post by Cesar Rodriguez of Cloud Security Musings was quite helpful, as well as this one by Chris Ayers . The issue is using Rego; I found a cool VS Code Extension; Terrascan Rego Editor , as well as several courses on Styra Academy; Policy Authoring and Policy Essentials . The big issue was figuring out how to tell Terrascan to follow a certain policy; I made it, put it in a directory, and ran the program while in that directory