Skip to content

06.03.2021Practice

CSS Grid Intuition

The key is to be able to focus more attention on the feeling and form of your movement than the speed and power of the attacker. The more you concentrate on and enjoy the sensation of your own movement, the stronger the magnetic pull toward that movement will be. -Wendy Palmer

Intuition is something that is so close to the creative process that it is often seen as elusive to those who don't normally engage with creative play. In my opinion, creative play is a way to do 'inner child' work. To engage that part of you that is at once confident, creative and without limits. Often that connection is blocked and the longer you don't engage with it, the harder it is to engage. However, we all have the capacity to engage. Web Development comes in at the intersection of creativity and perhaps logical reasoning, two qualities which might seem at odds but are in fact complimentary. This post covers my journey in discovering intuition in web design through engaging with that creative outlet.

CSS grid and the developer tools that are built into the browser offer us an exciting way to bridge that logical creative gap. By having an exact positioning frame work in the browser, css grid is able to provide to us a tool that we can use to deliberately and consistently place items on a page.

I've recently had the pleasure of using CSS grid on my portfolio site and that was a blast. Below i'll show you some of the design decisions made and how 'intuition' was honed with the developer window.

My intuition was to work as minimally as possible. I have a tendency to overly complicate projects so the domain of my website will be comprised of:

  1. Link to this Blog
  2. Link to my personal website
  3. Link to my repo on github

That's it. Nothing fancy. It's a static website hosted on git hub that allows for continuous deployment. These simple parameters are good containers that allow for the developer to focus on creating something a bit more creatively enticing. A good isolated environment to test simple web development concepts live in the browser. You can even add a custom domain if you wanted!

https://alvin-muniz.github.io/developerportfolio/

With my simple scope in mind, I set out to scaffold the page in html.

<body>
<div class="container">
    <main>
        <a href="http://www.alvinmuniz.com"/>About Me</a>
        <a href="https://www.theintuitiveprogrammer.com">Writings</a>
        <a href="https://github.com/alvin-muniz/">Repo</a>
        <p>Thank you for visiting! I'm Alvin!</br> <a href="http://www.alvinmuniz.com">Nature</a>, <a href="https://github.com/alvin-muniz/">Code</a> and <a href="https://wwww.theintuitiveprogrammer.com">Writing</a> keep me sane in the membrane.</br>
            <a href="mailto:muniz.alvin@gmail.com">Email me!</a> if you like to meditate before your first cup of coffee.</p>
    </main>
</div>

That's not a lot of code and it's readable. Win! Moving forward, I wanted to play with the elements on the page. Fudging and nudging things around to see how they fit on the screen. It wasn't all unicorns and rainbows. My first failed experiment is here. At this point in the project I learned a valuable lesson. I need to simplify things! My understanding of positioning was at best rudimentary. I had no intuition on how the browser works and have always adopted a problem solving approach rooted on discovery. I knew that to develop intuition I had to dial things back a bit. Here are a couple of road blocks I faced that directed my action:

  • My time to get up and running was scattered as I was figuring out a feedback workflow that worked for me.
  • I kept making the same mistakes over and over. My inability to make incremental improvements was reflective of a deeper lack of understanding. .

With this insight, I started to think of how children learn intuitively and so conceptually I started to play with inserting shape elements on the page by wrapping my a tags into divs with the below class definitions.

.circle {
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25vh;
    height: 25vh;
    background: gold;
    border-radius: 50%;
    grid-row: 2 / span 1;
    grid-column: 2 / span 2;
}

.triangle {
    display: flex;
    font-size: 2.5em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0px;
    height: 0px;
    border-left: 364px solid transparent;
    border-right: 364px solid transparent;
    border-bottom: 364px solid red;
    grid-row: 2 / span 2;
    grid-column: 2 / span 2;
}

.triangle a {
    position: relative;
    width: 100px;
    top: 250px;
}

.square {
    font-size: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 600px;
    background: lawngreen;
    grid-row: 2 / span 2;
    grid-column: 5 / span 2;
}

I used grid to position the elements and flex to place them within the bounds of the div. A world where both can co-exist!

I also did some additional tweaks to page, imported some google fonts and did some light additional styling / added animation to an icons that I manipulated in photoshop.

This was a fun project made in a short period of time. Feel free to check out my site to play with the design in the inspector tools!

Cheers,
Alvin

Recent posts

  • 28.02.2021Practice

    Deliberate Practice
  • 23.02.2021General

    Mission Statement

Copyright Alvin Muniz 2021