Member Avatar for dexterz

Hi,

10 CSS layout Templates for you to practice or use in your project.
Click the link to download them all.
http://www.ex-designz.net/template/tempcat.asp?cat_id=13

By: www.ex-designz.net

  • 11 Contributors
  • 11 Replies
  • 250 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by reen.blom

Dani AI

Generated

These templates are a good, low-friction way to practice converting old table-based designs into modern, semantic, tableless layouts. Several members already mentioned they’re using them to learn (for example , and ). Below is a short, practical checklist, a tiny CSS Grid example you can drop into a template, and quick troubleshooting/licensing notes to avoid common mistakes.

Practical workflow (do these in order): pick one template and map its visual regions to semantic elements (header, nav, main, aside, footer); move any presentational attributes into a single external stylesheet; rebuild the layout with CSS Grid for the overall page and Flexbox for small component rows where appropriate; apply a mobile-first breakpoint strategy and test by resizing the browser. Modern guidance and examples for Grid and Flexbox are covered in the MDN guides. (developer.mozilla.org)

Try this minimal Grid skeleton (start with a copy of the template files so you can revert):

<div class="site">
  <header>Site title</header>
  <nav>Navigation</nav>
  <main>Main content</main>
  <aside>Sidebar</aside>
  <footer>Footer / attribution</footer>
</div>
* { box-sizing: border-box; }

.site {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  gap: 16px;
}

header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

@media (max-width: 720px) {
  .site {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
  }
}

Quick troubleshooting and notes: set * { box-sizing: border-box; } to avoid layout math surprises. Use the browser DevTools grid inspector to visualize tracks and gaps. If you run into collapsing containers or float problems, give the parent a new block formatting context (e.g., overflow: auto or prefer Grid/Flex to floats). As asked about copyright and later noted licensing, always check the template’s license on the download page and follow the attribution rules for that licence; Creative Commons has details on license types and attribution. Also mind accessibility basics (semantic headings, descriptive link text, landmark roles) and the WCAG guidance when you adapt layouts. (mdn.org.cn)

If you want, pick one template, post which layout area gives you trouble, and include a short HTML/CSS snippet — that makes it easy to give focused fixes.

Recommended Answers

All 11 Replies

Member Avatar for mdvaldosta

ahhh, thanks

Member Avatar for soapbath

They are handy, any idea on what the copyright is>:

Member Avatar for anthmaina

thanx alot

Member Avatar for vangraan

Cool thanks. I watched the Lynda.com tutorials on CSS2 this weekend and they where quite good. I started moving my some of my sites away from tables and using div for the layouts. I will run through these aswell.

Member Avatar for dexterz

They are handy, any idea on what the copyright is>:

All the templates are free under Creative Common license. You, reproduce,redistribute them, or use in any project you want as long as you give proper credit to the author such as link back to their website.

Dexter zafra

Member Avatar for hi-hacker

thanks

Member Avatar for todaydvd

Good! I would like to create a table-less website too...

Thanks!

Member Avatar for azzu5

thats cool.....

Thankx...

Member Avatar for Riv3n

Thanks a lot. I need this.

And thanks for the website address too. Lots of ideas. Lots of templates. I'm downloading templates like crazy. :)

Member Avatar for reen.blom

Thanks this is a brilliant site! I am also new to tableless sites!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.