Open In App

How to create a Pure CSS Crossword Puzzle ?

Last Updated : 22 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Crossword Puzzles are engaging word games that test your knowledge. Words can be placed vertically or horizontally, and players can input their answers into the respective boxes. Once the entire puzzle is completed, users can check their answers by hovering over a button.

Preview
Screenshot-2024-01-15-162235

Approach

  • Create the structure of the crossword like a square grid (here it is 10 x 10 ). then add input tags to the blocks used for puzzle with maxlength 1.
  • Add a grid property to the container div with required rows and columns then add sizing properties to the blocks.
  • Now, position the number on top of the input with z-index. Add an focused effect to the input with :focused in CSS. Questions are enclosed in a div, inside the container div. Poppins Font is imported form google fonts.
  • Answers are given in a ordered list which is shown only by hovering button using visibility property. Add responsiveness to the puzzle by using media queries. Here 2 breakpoints have been taken (480px, 980px).
  • To check the answers hover over the button.

Example: Creating a Pure CSS Crossword Puzzle.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href="style.css">
    <title>Crossword</title>
</head>
  
<body>
    <h1>Crossword Puzzle</h1>
    <div class="container">
        <div class="crossword">
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">1</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">2</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">3</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
            </div>
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
            </div>
            <div class="row">
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">4</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">5</span>
                </div>
                <div class="cell unused"></div>
            </div>
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
            </div>
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">6</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">7</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell  unused"></div>
            </div>
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell ">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
            </div>
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">8</span></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
            </div>
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
            </div>
  
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell">
                    <input type="text" maxlength="1">
                    <span class="number">9</span>
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell">
                    <input type="text" maxlength="1">
                </div>
                <div class="cell unused"></div>
            </div>
  
            <div class="row">
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
                <div class="cell unused"></div>
            </div>
        </div>
  
        <div class="questions">
            <h2>Questions</h2>
            <ol id="questionsList">
                <li>A Music Show (Across)</li>
                <li>An alternate for Result (Down)</li>
                <li>Creative work (Down)</li>
                <li>Dark Knight (Across)</li>
                <li>You get what you give (Down)</li>
                <li>Used in Dark (Across)</li>
                <li>No corners (Down)</li>
                <li>mightier than sword (Across)</li>
                <li>Once in a Year (Across)</li>
            </ol>
            <button>Show Answers</button>
            <ol id="answers">
                <li>CONCERT</li>
                <li>OUTCOME</li>
                <li>CRAFT</li>
                <li>BATMAN</li>
                <li>ECHO</li>
                <li>TORCH</li>
                <li>ROUND</li>
                <li>PEN</li>
                <li>BIRTHDAY</li>
            </ol>
        </div>
    </div>
</body>
  
</html>
 






                        









CSS














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















/*style.css*/


@import url( 


'https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;800&display=swap'); 


  


body { 


    display: flex; 


    align-items: center; 


    justify-content: center; 


    flex-direction: column; 


    font-family: 'Poppins', sans-serif; 


} 


  


.container { 


    display: flex; 


    width: 100%; 


    justify-content: space-evenly; 


} 


  


.crossword { 


    display: grid; 


    grid-template-rows: repeat(10, 60px); 


} 


  


.row { 


    display: grid; 


    grid-template-columns: repeat(10, 60px); 


    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; 


  


} 


  


.cell { 


    width: 60px; 


    height: 60px; 


    background-color: white; 


    border: 1px solid green; 


} 


  


.unused { 


    background-color: green; 


} 


  


h1 { 


    text-align: center; 


    color: green; 


    font-size: 2.2rem; 


} 


  


.number { 


    position: relative; 


    font-weight: 300; 


    color: #000; 


    bottom: 60px; 


    left: 3px; 


    z-index: 10; 


} 


  


input:focus { 


    outline: none; 


    background-color: #bddebe; 


    width: 57.5px; 


    height: 57.5px; 


} 


  


input { 


    display: block; 


    position: relative; 


    font-size: 20px; 


    text-align: center; 


    height: 60px; 


    width: 60px; 


    background-color: transparent; 


    border: 0px solid; 


    z-index: 1; 


  


} 


  


.questions { 


    max-width: 40%; 


} 


  


h2 { 


    font-size: 2rem; 


    color: green; 


    text-align: center; 


} 


  


#questionsList { 


    line-height: 2.7rem; 


    font-size: 1.2rem; 


} 


  


#questionsList li { 


    text-align: center; 


    list-style-position: inside; 


} 


  


  


button { 


    display: block; 


    margin: 0 auto; 


    padding: 1rem; 


    background-color: green; 


    color: #fff; 


    border-radius: 5px; 


    font-family: 'Poppins', sans-serif; 


    border: 2px solid transparent; 


  


  


} 


  


#answers { 


    display: flex; 


    flex-wrap: wrap; 


    gap: 2rem; 


    justify-content: space-around; 


    visibility: hidden; 


    color: green; 


    margin: 1.5rem; 


} 


  


button:hover~#answers { 


    visibility: visible; 


} 


  


button:hover { 


    background-color: #fff; 


    border: 2px solid green; 


    color: green; 


    cursor: pointer; 


    transition: all .2s ease; 


} 


  


  


@media screen and (max-width:980px) { 


    .container { 


        flex-direction: column; 


        align-items: center; 


    } 


  


    .crossword { 


        display: grid; 


        grid-template-rows: repeat(10, 40px); 


    } 


  


    .row { 


        display: grid; 


        grid-template-columns: repeat(10, 40px); 


    } 


  


    .cell { 


        width: 40px; 


        height: 40px; 


    } 


  


    input { 


        width: 40px; 


        height: 40px; 


        font-size: 1rem; 


    } 


  


    input:focus { 


  


        height: 40px; 


        width: 40px; 


    } 


  


    .number { 


        bottom: 47px; 


        font-size: .8rem; 


    } 


  


    .questions { 


        max-width: 100%; 


    } 


  


} 


  


@media screen and (max-width:480px) { 


    .container { 


        flex-direction: column; 


        align-items: center; 


    } 


  


    .crossword { 


        display: grid; 


        grid-template-rows: repeat(10, 30px); 


    } 


  


    .row { 


        display: grid; 


        grid-template-columns: repeat(10, 30px); 


    } 


  


    .cell { 


        width: 30px; 


        height: 30px; 


    } 


  


    ol { 


        line-height: 2rem; 


        font-size: 1rem; 


    } 


  


    input { 


        width: 30px; 


        height: 30px; 


        font-size: .7rem; 


    } 


  


    input:focus { 


        height: 30px; 


        width: 30px; 


    } 


  


    .number { 


        bottom: 37px; 


        font-size: .7rem; 


    } 


  


    .questions { 


        max-width: 100%; 


    } 


}



















                        







                        










Output:


PUZZLEGAME


                                 


                                                             

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            

                            
                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Create a Crossword Puzzle Game using React-Native
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Create a Crossword Puzzle Game using React-Native
            

        
    
        
            

                Create a Quote generator web app with pure JavaScript using an API
            

        
    
        
            

                Pure CSS Horizontal Menu
            

        
    
        
            

                What are the important features of Pure.CSS ?
            

        
    
        
            

                Pure CSS Responsive Grids
            

        
    
        
            

                Pure CSS Menus Complete Reference
            

        
    
        
            

                Design a close button using Pure CSS
            

        
    
        
            

                How to use buttons with icons using Pure CSS?
            

        
    
        
            

                Design a Vertical and Horizontal menu using Pure CSS
            

        
    
        
            

                How to design a dropdown menu using pure CSS ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        venkateshk1220                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox