#css flexbox grid

[codingflicks]

Responsive Neumorphism Service Section

[reference-database]

Learn CSS by Playing Games

FlexBox Froggy

Grid Garden

FlexBox Defense

CSS Dinner

CSS Monkey

https://www.codemonkey.com/

CSSBattle

[josegremarquez]

Optimizando tus Páginas Web para la Impresión con CSS

Aunque la web está diseñada principalmente para su visualización en pantallas, a menudo necesitamos imprimir el contenido de nuestras páginas. CSS nos proporciona un conjunto de herramientas para controlar la apariencia de nuestras páginas cuando se imprimen, garantizando una presentación limpia y profesional. ¿Por qué utilizar hojas de estilo para la impresión? Las hojas de estilo nos…

[landlessbud]

knowing the inner workings of css is making me too powerful

[jcmarchi]

8 CSS Snippets for Creating Bento Grid Layouts

New Post has been published on https://thedigitalinsider.com/8-css-snippets-for-creating-bento-grid-layouts/

8 CSS Snippets for Creating Bento Grid Layouts

Another day, another design trend! Bento grid layouts are the subject this time around. They’re bold and beautiful. Plus, they satisfy those with a need for symmetry.

So, what exactly is a Bento layout? Think of it as a puzzle. Different-sized containers fit together to create a seamless look. Inspired by Japanese culture, it’s popping up all over the web.

There’s good reason for Bento’s growing popularity. You can use these layouts in a multitude of ways. Everything from listing blog posts to product features is possible. They’re also perfect for dashboard screens.

We should also mention the role that the evolution of CSS has played. Both CSS Grid and Flexbox make these layouts easier to build. No hacks or workarounds are necessary!

With that, here’s a look at 8 beautiful Bento grid layouts.

Complex Bento CSS Grid Layout

CSS Grid packs a lot of power into a tiny bit of code. For example, this complex grid layout requires only 43 lines of CSS. The layout is both efficient and naturally responsive. Therefore, you won’t have to play around with media queries.

See the Pen Complex Bento Layout

Bento-Style Responsive Dashboard

Here’s a gorgeous dashboard layout that benefits from Bento. The layout offers a great way to display relevant content. Everything is neatly organized and easy to follow. The use of photography and color makes this example stand out.

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan

Bento Design Concept Layout

This page layout is a different take on the Bento aesthetic. There’s a sidebar featuring in-page navigation. Clicking a button expands it. Meanwhile, the content container maintains a consistent height.

See the Pen bento design concept by Abhishek Bhardwaj

Bento-Box-V1.0.1

Bento layouts also benefit from minimalism. This layout features fewer bells and whistles. Notice the use of white space and legible typography. The animated charts catch your eye without being overwhelming.

See the Pen Bento-Box-V1.0.1 by Gwenaël Guiraud

Sticky Bento on Scroll

This “sticky” presentation adds special effects to the mix. Watch how certain elements stick as you scroll. The idea is that you can go beyond static grids. Bento can be fun, too!

See the Pen Sticky Bento on Scroll ✨ by Jhey

Bento Grid Using CSS Flexbox

Let’s check out another fun example using Flexbox. This grid has a neon look and includes cool hover effects. Bonus points here for maintaining legibility and responsiveness.

See the Pen bento grid – challenge (Chrome +111) by EaterUsr

Card-Based Layout with Gradient Borders

Here’s an example for those wanting to stand out from the crowd. This card-based layout features animated borders, “wipe” effects, and beautiful hover styling. The layout remains clean – even with all those goodies.

See the Pen Cards (gradient border) by Dan

CSS Grid & :has() Grid Layouts

We can achieve a lot with the CSS :has() pseudo-class. This example uses it to adjust the layout as boxes are added and subtracted. Watch as the layout maintains perfect symmetry throughout.

See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle

Use Bento Grids to Keep Your Layout Nice and Tidy

The idea of using Bento aesthetics in web design isn’t new. However, older CSS layout techniques made them difficult to build. That’s no longer the case.

Perhaps the best part is that modern CSS does all the dirty work. We don’t need to compute complex calculations. CSS Grid and Flexbox can do this for us.

That leaves us free to experiment. The examples above demonstrate what is possible. And you can get as creative as you like.

Want to see more Bento grid examples? Check out our CodePen collection!

Related Topics

Top

[bruisedconscience-reblogs]

the hardest thing abt learning flexbox or grid is constantly having dave matthews band stuck in your head

[click-code-load]

Flex Box V's Grid Box Layout???

What is the difference between grid box layout and flex box layout advantages and disadvantages?

Frankly when to use a Flex box layout versus a grid box layout confuses me!

I’ve summarised the advantages and disadvantages from my research so far and I’d love to hear your thoughts on the subject?

Grid box layout and flex box layout are two commonly used CSS layout models in web development. While both offer powerful ways to control the layout of elements on a webpage, there are some key differences between the two.

Flexbox layout, also known as flexible box layout, is designed to provide a responsive way to align and distribute content within a container. It is a one-dimensional layout system that works by aligning elements along either the horizontal or vertical axis. Flexbox is particularly useful for creating responsive layouts that adjust to different screen sizes and orientations.

Advantages of flexbox layout:

Provides a flexible and efficient way to align and distribute content.

Allows for easy responsive design, making it easier to create layouts that work well on different devices and screen sizes.

Simplifies centering and spacing of content, reducing the need for complex CSS rules.

Offers better control over the order in which content is displayed, allowing for more dynamic layouts.

Disadvantages of flexbox layout:

Can be challenging to use for complex layouts that require more advanced positioning and alignment.

May require additional CSS rules to achieve certain design goals, leading to increased code complexity and file size.

Grid box layout, also known as CSS grid layout, is a two-dimensional layout system that allows for more fine-grained control over the placement of elements on a webpage. It works by creating a grid of rows and columns, which can be used to position elements anywhere within the container. Grid is particularly useful for creating complex layouts that require a high degree of precision.

Advantages of grid box layout:

Offers precise control over the placement of elements on a webpage, allowing for more complex and sophisticated layouts.

Provides a powerful way to create responsive designs that adapt to different screen sizes and orientations.

Simplifies the process of creating layouts that incorporate both columns and rows, reducing the need for additional CSS rules.

Offers a high degree of flexibility, making it easy to create unique and visually appealing designs.

Disadvantages of grid box layout:

Can be more difficult to learn and use than flexbox layout, especially for those new to web development.

May require more CSS code to achieve certain design goals, leading to increased file size and complexity.

Some older browsers may not support CSS grid, requiring additional workarounds or fallbacks to ensure compatibility.

Flexbox is a one-dimensional layout system that excels at creating responsive designs with flexible content distribution, while grid is a two-dimensional layout system that provides precise control over the placement of elements on a webpage. Both have their advantages and disadvantages, and the choice between them will depend on the specific needs of a given project.

Check out these websites they definitely covers all the bases if you are unsure which best suits your project:

Video Link:

[zaions]

Mastering Flexbox and Grid for Complex Layouts

[littledragonkana]

I feel you, Feli....I feel you

I wanted to move a headline to the lower right of the header. CSS put it everywhere but where I wanted it to be. My entire flex box broke because I wanted to have my headline on the right instead of the left 🥲

you put in css whose sole purpose is "move button to the left", think it works (you are a fool) and once implimented the move button left code somehow started cannibalizing all headlines directly below it

[izicodes]

it seems like my ask from a few days ago didn’t get sent 😭 argh stupid tumblr

i was basically asking there what resources you would recommend for everything that could be useful for neocities,, like html, css,,(and you mentioned java script i think?) especially beginner-beginner stuff and then maybe for intermediate 👉👈 i know you probably have all those on your blog already but you know me in a bit 😵‍💫

also yes i’d love to work on ours together, even if we didn’t make them match! cause you know you have millions of brilliant ideas :33 🌻🌻💛

Hiya,

These are the stuff I used / still use, hope it's useful:

W3Schools

Mozilla Developer Network (MDN)

Codecademy

freeCodeCamp

Khan Academy HTML/CSS Course

Shay Howe's HTML and CSS tutorial

HTML Dog

CSS-Tricks

CSS Layout

Flexbox Froggy

Grid Garden

CSS Zen Garden

CSS Animation

Try them out and see what works best for you! 👍🏾

[eggdesign]

how did you learn coding?

I am pretty much entirely self taught as far as front end goes!

I started messing around with HTML and CSS with tumblr themes back in 2016-ish.

For javascript I looked at https://developer.mozilla.org/en-US/ for a lot of documentation + examples. And also used codepen a lot to kinda reverse engineer existing snippets of code.

I also read a lot of https://css-tricks.com/

And for flexbox + css grid there's these:

After I got a good foundation of vanilla JS, I learned Vue for a little while and then moved on to React. The new react documentation is really good in my opinion so I definitely recommend reading that if you're interested in learning.

Most of my learning came from trial and error and working on projects that I was really excited about. I used to be so proud of findtags (the original version) which was in jquery...

The react version is miles ahead of it. And even then, the theme builder is also way ahead of findtags. I learned way more between those two projects than reading documentation alone!

[josegremarquez]

El Modelo de Caja en CSS: La Base de Todos los Elementos Web

¿Qué es el modelo de caja? Imagina cada elemento de tu página web como una caja. Esta caja tiene un contenido (el texto o imagen), un borde, un relleno y un margen. El modelo de caja es la forma en que CSS describe y posiciona estas cajas en la página. Comprender este concepto es fundamental para crear diseños web precisos y personalizados. Como ya hemos visto, el modelo de caja es la…

[widowskins]

widowbase v3 and v4

Whooboi, there is a lot of discourse going on right now about JCINK coders. Perfect time for me to update some base skins!

For those who just want to streamline their coding process, I have updated my widowbase v3 to include a day/night theme toggle and made a few responsive tweaks to the vertical nav and sidebar. For those looking to learn how to use CSS grid and flexbox to create responsive forum designs, I added a new base, widowbase v4. This version includes some HTML templates that have a very ugly, extremely basic, but functional fluid grid layout. These templates also incorporate hidden divs (read as, display: none) that include the PHP variables frequently used inside those respective HTML templates, so you can easily delete everything I've done and start from scratch with your own. Then just delete the hidden div when you've used everything you need. Easy peasy!

For those of you just beginning your coding journey, I wish you the best of luck! It is such a fun and rewarding hobby. You are also free to rip apart any of the codes on my preview site and cobble them back together. These experiments can be a great learning tool! You are more than welcome to use any of my free resources as a base, as long as the finished product remains free. As for my actual skin bases (or template sets specifically labeled as bases), these can be used for free or paid skins. Make money or give it away, whatever works for you, just leave the credits given to resources intact so others can find out how to accomplish the same thing!

[codomars]

2 ─ 4/100 days of code, 26 ─ 280523

coding progress —

✓ day 2 : CSS Bootstrap Practice ✓ day 3 : Recap of the full HTML + CSS Lessons ✓ day 4 : Building a responsive Landing page

i'm finally done with HTML and CSS, i found that having experience working with webflow made understanding the grid system and flexbox much easier!

but i can't say i'm good with css yet; my learning process so far has been based a lot on theory and less on practice.

i'm planning to change that.

so before starting the Java script chapter, i prepared some HTML and CSS challenges to help me get more familiar working with these tools.

challenge number one : is to make a responsive landing page

i started working on it this morning, learning bootstrap is really making building anything so easy,

it feels abit like cheating! ꒰･‿･๑꒱

work in progress of the landing page

[anomalouscorvid]

how did you go about doing the navigation links on your neocities? it's really neat!

MY NEOCITIES... i really need to add more to that. every so often i remember it exists. anyway

the sidebar and main text, first of all, are two containers in the simplest possible flexbox container (the css for it just has 'display: flex' and nothing else). very useful, i love flexbox. if you haven't used it before, i'd recommend looking into it! loads of examples and guides out there. (there's also css grid, but i've never used it)

the navigation itself in the html is very simple, basically a list of links.. not actually a list, just separate 'paragraphs'. (which i have to update on every page every time i add/rename/remove another page..) additional thought: i think mayyybe if i used a flexbox container for the links themselves it'd be easier to make it so the navigation turns horizontal (and along the top) instead of vertical when the screen is small enough? or something with inline blocks maybe. i haven't gotten around to trying any of that though

back on topic, the symbol before each link and the translucent 'label' on hover is from the css, like this

so basically the 'label' sticking out is, like, an offset background? and also the current page link gets a custom class that gives it the same formatting as the hover text

i think that's everything, i'm not great at actually explaining how i did stuff so i hope this is helpful haha

[cea-tide]

(ceatide.lgbt)

Updating my website design, because my previous (also half-finished) design was overly reliant on modern features like flexbox, and I want it to support old browsers (including hopefully netscape).

You can pretty much see what still needs to be updated haha; all the turquoise-ish colours are from the old design:

Using flexbox, CSS grid, semantic elements, and other HTML5/CSS3 tags/properties, is fine as long as you have a fallback for when it is not supported (and the old browser doesn't crash, cough cough), but the old layout didn't have a graceful fallback that could be implemented.

The hard part is making it responsive, but I am doing my best with the progressive enhancement principle